React Router V6实现嵌套路由重定向

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属性，因为一个代表当前路径所展示的页面，另一个表示重定向路径。

这篇好文章是转载于：学新通技术网