react router
在v6
版本取消了<Redirect/>
,并使用<Navigate to=''/>
实现重定向功能。
一级路由重定向
比如访问localhost:3000/
重定向到 localhost:3000/homepage
,我们得这样写:
const routerMap = [
{
path: 'homepage',
element: <Homepage/>
},
{
path: '/',
element: <Navigate to='/homepage'/>
}
]
这样就能实现简单的重定向功能。
但是我们的页面不止一个层级,是嵌套路由的话我们怎么实现呢?
开始作者也搜寻了很久答案,没结果。最后还是想着不能脱离<Navigate/>
。于是在反复实验下,终于实现了。
const routerMap = [
{
path: 'nested-routes',
element: <Navigate to='/nested-routes/nested1' />
},
{
path: 'nested-routes',
element: <NestedRoutes/>,
children: [
{
path: 'nested1',
element: <Nested1/>
},
{
path: 'nested2',
element: <Nested2/>
},
]
}
]
我们只需要在要实现重定向的一级路由声明两次element
属性,因为一个代表当前路径所展示的页面,另一个表示重定向路径。