前言
博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻React专栏
之前学习了react-router-dom5版本的相关内容
参考文章👉🏻React路由(详解版)和 路由的模糊匹配,重定向以及嵌套路由
今天来学习react-router-dom6版本的相关知识!
感兴趣的小伙伴一起来看看吧~🤞
概述
React Router 以三个不同的包发布到 npm 上,它们分别为:
- react-router: 路由的核心库,提供了很多的:组件、钩子。
- react-router-dom: 包含react-router所有内容,并添加一些专门用于 DOM 的组件,例如 等 。
- react-router-native: 包括react-router所有内容,并添加一些专门用于ReactNative的API,例如:
<NativeRouter>
等。
与React Router 5.x 版本相比,改变了什么?
- 内置组件的变化:移除
<Switch/>
,新增<Routes/>
等。- 语法的变化:
component={About}
变为element={<About/>}
等。- 新增多个hook:
useParams
、useNavigate
、useMatch
等。- 官方明确推荐函数式组件了!!!
…
1. 一级路由Routes
<BrowserRouter>
- 说明:
<BrowserRouter>
用于包裹整个应用,v6版本中,依然需要用<BrowserRouter>
标签将App组件包裹起来。 - 示例代码:
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>
)
<HashRouter>
- 说明:作用与
<BrowserRouter>
一样,但<HashRouter>
修改的是地址栏的hash值。 - 备注:6.x版本中
<HashRouter>
、<BrowserRouter>
的用法与 5.x 相同。
基本使用
这里还是以之前学过的react-router-dom@5的案例来分析。
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>
)
}
<Routes/> 与 <Route/>
- v6版本中移出了先前的
<Switch>
,引入了新的替代者:<Routes>
。<Routes>
和v5版本的Switch一样,如果匹配上了,往下就不会再匹配了。<Routes>
和<Route>
要配合使用,且必须要用<Routes>
包裹<Route>
。<Route>
相当于一个 if 语句,如果其路径与当前 URL 匹配,则呈现其对应的组件。<Route caseSensitive>
属性用于指定:匹配时是否区分大小写(默认为 false)。- 当URL发生变化时,
<Routes>
都会查看其所有子<Route>
元素以找到最佳匹配并呈现组件 。<Route>
也可以嵌套使用,且可配合useRoutes()
配置 “路由表” ,但需要通过<Outlet>
组件来渲染其子路由。
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>
组件被渲染,就会修改路径,切换视图。
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高亮
在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>
代码优化实现复用
将ClassName的值封装成一个函数
function computedClassName({ isActive }) {
return isActive ? 'list-group-item demo' : 'list-group-item'
}
...
<NavLink className={computedClassName} to="/about">About</NavLink>
4. useRoutes()路由表
作用
根据路由表,动态创建
<Routes>
和<Route>
。
在src下新建一个routes文件夹,专门用于维护路由表,应用中的路由都存放在路由表中。
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' />
}
]
App.jsx
import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes/index';
export default function App() {
// useRoutes可以用路由表生成<Routes>...</Routes>结构
// 根据路由表生成对应的路由规则
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>
)
}
5. 嵌套路由Outlet
作用
当
<Route>
产生嵌套时,渲染其对应的后续子路由 (类似于vue中 < < <router-view/>)
如图,News组件和Message组件是Home的子组件
将二级路由放在children属性
中注册:
...
{
path: '/home',
element: <Home />,
children: [
{
path: 'news',
element: <News />
},
{
path: 'message',
element: <Message />
}
]
},
...
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>
)
}
< < <NavLink className=‘list-group-item’ to=‘news’>News < < </NavLink>
中的to属性有三种写法:文章来源:https://www.toymoban.com/news/detail-786610.html
- to=‘news’
- to=‘./news’
- to=‘/home/news’ //这一种与v5版本中一样
今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨
原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
🤞 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
文章来源地址https://www.toymoban.com/news/detail-786610.html
到了这里,关于【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!