!
也想出现在这里? 联系我们
广告区块

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

前言

博主主页??蜡笔雏田学代码
专栏链接??React专栏
之前学习了react-router-dom5版本的相关内容
参考文章??React路由(详解版)路由的模糊匹配,重定向以及嵌套路由
今天来学习react-router-dom6版本的相关知识!
感兴趣的小伙伴一起来看看吧~?

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

概述

React Router 以三个不同的包发布到 npm 上,它们分别为:

  1. react-router: 路由的核心库,提供了很多的:组件、钩子。
  2. react-router-dom: 包含react-router所有内容,并添加一些专门用于 DOM 的组件,例如 等 。
  3. react-router-native: 包括react-router所有内容,并添加一些专门用于ReactNative的API,例如:等。

与React Router 5.x 版本相比,改变了什么?

  1. 内置组件的变化:移除 ,新增 等。
  2. 语法的变化:component={About} 变为 element={}等。
  3. 新增多个hook:useParamsuseNavigateuseMatch等。
  4. 官方明确推荐函数式组件了!!!

1. 一级路由Routes

  1. 说明: 用于包裹整个应用,v6版本中,依然需要用标签将App组件包裹起来。
  2. 示例代码:
import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  React.StrictMode>
    BrowserRouter>
      App />
    /BrowserRouter>
  /React.StrictMode>
)

  1. 说明:作用与一样,但修改的是地址栏的hash值。
  2. 备注:6.x版本中 的用法与 5.x 相同。

基本使用

这里还是以之前学过的react-router-dom@5的案例来分析。

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

App.jsx

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
  return (
    div>
      div className="row">
        div className="col-xs-offset-2 col-xs-8">
          div className="page-header">
            h2>React Router Demo/h2>
          /div>
        /div>
      /div>
      div className="row">
        div className="col-xs-2 col-xs-offset-2">
          div className="list-group">
            {/* 路由链接 */}
            NavLink className="list-group-item" to="/about">About/NavLink>
            NavLink className="list-group-item" to="/home">Home/NavLink>
          /div>
        /div>
        div className="col-xs-6">
          div className="panel">
            div className="panel-body">
              {/* 注册路由 */}
              Routes>
                Route path='/about' element={About />} />
                Route path='/home' element={Home />} />
              /Routes>
            /div>
          /div>
        /div>
      /div>
    /div>
  )
}
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

  1. v6版本中移出了先前的,引入了新的替代者:
  2. 和v5版本的Switch一样,如果匹配上了,往下就不会再匹配了。
  3. 要配合使用,且必须要用包裹
  4. 相当于一个 if 语句,如果其路径与当前 URL 匹配,则呈现其对应的组件。
  5. 属性用于指定:匹配时是否区分大小写(默认为 false)。
  6. 当URL发生变化时, 都会查看其所有子 元素以找到最佳匹配并呈现组件 。
  7. 也可以嵌套使用,且可配合useRoutes()配置 “路由表” ,但需要通过 组件来渲染其子路由。

2. 重定向Navigate

在v5版本中,路由的重定向使用的是Redirect,在v6版本中使用的是Navigate

v5版本的写法:
import { Redirect } from 'react-router-dom'
Redirect to="/home" />

v6版本的写法:
import { Navigate } from 'react-router-dom'
Route path='/' element={Navigate to='/about' />} />

作用

只要组件被渲染,就会修改路径,切换视图。

Navigate会接收两个属性: to 和 replace

Navigate to='/about' replace={false}/>

replace属性用于控制跳转模式(push 或 replace,默认是push)。

路由的跳转有两种模式,push和replace,push模式会将这个url压入路由history栈顶; 而replace模式会将栈顶的url替换 。

Navigate组件可以设置replace的值为true或false,默认值为false,所以默认为push跳转。

3. NavLink高亮

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

在v5版本中,实现NavLink高亮使用的是NavLink组件标签中的activeClassName属性,当你点击NavLink标签时,加哪个样式的类名。

NavLink activeClassName='demo' className="list-group-item" to="/about">About/NavLink>
NavLink activeClassName='demo' className="list-group-item" to="/home">Home/NavLink>

在v6版本中,想要实现自定义的类名,需要把className的值写成一个函数

//高亮样式
style>
    .demo {
      background-color: orange !important;
      color: white !important;
    }
/style>
NavLink className={({ isActive }) => 
{ return isActive ? 'list-group-item demo' : 'list-group-item' }} to="/about">
About
/NavLink>

/*
	默认情况下,当Home的子组件匹配成功,Home的导航也会高亮,
	当NavLink上添加了end属性后,若Home的子组件匹配成功,则Home的导航没有高亮效果。
*/
NavLink to="home" end >home/NavLink>
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

代码优化实现复用

将ClassName的值封装成一个函数

function computedClassName({ isActive }) {
  return isActive ? 'list-group-item demo' : 'list-group-item'
}
...
NavLink className={computedClassName} to="/about">About/NavLink>

4. useRoutes()路由表

作用

根据路由表,动态创建

在src下新建一个routes文件夹,专门用于维护路由表,应用中的路由都存放在路由表中。

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

src/routes/index.js

import About from '../pages/About'
import Home from '../pages/Home';
import { Navigate } from 'react-router-dom';

export default [
  // 路由表
  {
    path: '/about',
    element: About />
  },
  {
    path: '/home',
    element: Home />
  },
  {
    path: '/',
    element: Navigate to='/about' />
  }
]
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes/index';

export default function App() {
  
  // useRoutes可以用路由表生成...结构
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
 
  return (
    div>
      div className="row">
        div className="col-xs-offset-2 col-xs-8">
          div className="page-header">
            h2>React Router Demo/h2>
          /div>
        /div>
      /div>
      div className="row">
        div className="col-xs-2 col-xs-offset-2">
          div className="list-group">
            {/* 路由链接 */}
            NavLink className='list-group-item' to="/about">About/NavLink>
            NavLink className='list-group-item' to="/home">Home/NavLink>
          /div>
        /div>
        div className="col-xs-6">
          div className="panel">
            div className="panel-body">
              {/* 注册路由 */}
              {element}
            /div>
          /div>
        /div>
      /div>
    /div>
  )
}
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

5. 嵌套路由Outlet

作用

产生嵌套时,渲染其对应的后续子路由 (类似于vue中

router-view/>)

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

如图,News组件和Message组件是Home的子组件

将二级路由放在children属性中注册:

...
{
    path: '/home',
    element: Home />,
    children: [
      {
        path: 'news',
        element: News />
      },
      {
        path: 'message',
        element: Message />
      }
    ]
  },
...
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

Home.jsx

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom';

export default function Home() {
  return (
    div>
      h2>Home组件内容/h2>
      div>
        ul className="nav nav-tabs">
          li>
            NavLink className="list-group-item" to="news">News/NavLink>
          /li>
          li>
            NavLink className="list-group-item" to="message">Message/NavLink>
          /li>
        /ul>
        {/* 指定路由组件呈现的位置 */}
        Outlet />
      /div>
    /div>
  )
}
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

NavLink className=‘list-group-item’ to=‘news’>News

/NavLink>
中的to属性有三种写法:

  1. to=‘news’
  2. to=‘./news’
  3. to=‘/home/news’ //这一种与v5版本中一样

今天的分享就到这里啦✨

\textcolor{red}{今天的分享就到这里啦✨}

今天的分享就到这里啦

原创不易,还希望各位大佬支持一下

\textcolor{blue}{原创不易,还希望各位大佬支持一下}

原创不易,还希望各位大佬支持一下

?

点赞,你的认可是我创作的动力!

\textcolor{green}{点赞,你的认可是我创作的动力!}

点赞,你的认可是我创作的动力!

⭐️

收藏,你的青睐是我努力的方向!

\textcolor{green}{收藏,你的青睐是我努力的方向!}

收藏,你的青睐是我努力的方向!

✏️

评论,你的意见是我进步的财富!

\textcolor{green}{评论,你的意见是我进步的财富!}

评论,你的意见是我进步的财富!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xuxuii/article/details/126337516
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索