详解react-router-domv6版本基本使用介绍
短信预约 -IT技能 免费直播动态提醒
Routes
- 代替Switch组件,不会向下匹配
- 用来包裹Route
Route
- 必须被Routes组件包裹
- component属性变成element
- caseSensitive 路径大小写敏感属性，默认是不敏感（访问/about = /ABOUT）
- index 与path属性是互斥的，index表示为当前路由的根
- 可以用作layout组件，不写element属性，写了要与 Outlet组件配合使用（嵌套路由）
<Routes>
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />} caseSensitive={false} />
</Routes>
<Route path='/user'>
<Route index element={<h1>user~</h1>} />
</Route>Navigate
- 用来代替Redirect组件
- replace属性 跳转模式 "PUSH" | "REPLACE"
- 只要这个组件一渲染就会发生跳转
<Routes>
<Route path='/home' element={<Home />}></Route>
<Route path='/about' element={<About />} caseSensitive={false} />
<Route path='*' element={<Navigate to='/home' />} />
</Routes>NavLink
- className，自定义激活时的样式名 可以为字符串或者函数
- end 匹配子路由时是否高亮
- caseSensitive 代表匹配路径时是否区分大小写
useRoutes
用来管理路由表，相比v5，可能需要借助一些第三方库来实现路由config管理，现在v6版本自带
const routes = useRoutes([
{
path: '/home',
element: <Home />
},
{
path: '/about',
element: <About />
},
{
path: '*',
element: <Navigate to='/home' />
},
{
path: '/user',
children: [
{
index: true,
element: <h1>user~</h1> // 这种不属于嵌套路由，这里面children会防到父亲的位置，所以不需要配合Outlet组件使用
}
]
}
])嵌套路由
嵌套路由一般是配合 Outlet 组件使用，此组件类似于Vue的router-view组件，告知子路由应该渲染在什么位置
{
path: '/home',
element: <Home />, // 这种才属于嵌套路由
children: [
{
path: 'message',
element: <Message />
},
{
path: 'article',
element: <Article />
}
]
}在Home组件中使用<Outlet/>才能渲染子路由
<div style={{ marginTop: '48px' }}>
<div className='nav'>
<div className='nav-item'>
<NavLink to='/home/message'>message</NavLink>
</div>
<div className='nav-item'>
<NavLink to='/home/article'>article</NavLink>
</div>
<div style={{ marginTop: 36 }}>
<Outlet />
{}
</div>
</div>
</div>路由传参
- params传参（useParams）
- search参数传参（useSearchParams）
- state传参 (useLocation，获取v5版本的location对象，如果直接输入可能state为null)
编程式导航
useNavigate
const navigate = useNavigate()
navigate('detail3', {
state: {
id: *item*.id,
content: *item*.content,
title: *item*.title
}
})
<button *onClick*={() => navigate(-1)}>back</button> 返回上一页
<button *onClick*={() => navigate(1)}>go</button> 前进其他一些hooks
- useInRouterContext 判断组件是否被Router包裹，可能有些第三方组件需要判断
- useNavigationType 返回用户到当前页面的导航类型 "POP" | "PUSH" | "REPLACE";
- 注意 POP是指在浏览器直接打开了这个路由组件（刷新页面）
- useOutlet 返回嵌套的路由，可以代替Outlet组件
- useResolvedPath 给定一个url，解析出path，hash，search（location对象）
到此这篇关于详解react-router-dom v6版本基本使用介绍的文章就介绍到这了,更多相关react-router-dom v6使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
