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

react routerv6版本取消了,并使用实现重定向功能。

一级路由重定向

比如访问localhost:3000/ 重定向到 localhost:3000/homepage,我们得这样写:

const routerMap = [
	{
	    path: 'homepage',
	    element: <Homepage/>
  	},
	{
		path: '/',
		element: <Navigate to='/homepage'/>
	}
]

这样就能实现简单的重定向功能。

但是我们的页面不止一个层级,是嵌套路由的话我们怎么实现呢?

开始作者也搜寻了很久答案,没结果。最后还是想着不能脱离。于是在反复实验下,终于实现了。

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

你可能感兴趣的:(react.js,javascript,前端,reactrouter,router,V6)