React router v6写法总结

蒟蒻的工具人

已于 2023-06-22 13:27:24 修改

阅读量2.3k

点赞数

分类专栏： react 文章标签： react router

于 2022-04-25 23:27:14 首次发布

本文链接：https://blog.csdn.net/weixin_51277037/article/details/124416589

版权

react 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了React Router v6的变化，包括使用BrowserRouter的包裹要求，Routes组件的更新，如何替换Redirect为Navigate进行路由重定向，以及useNavigate的使用方法。讲解了如何处理嵌套路由和参数传递，并提供了注册路由表的示例。最后提到了关键组件如Outlet和编程式导航在新版本中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相对v5的变化
使用前需要包裹根节点

 <BrowserRouter>
      <RootRouter/>
 </BrowserRouter>

Routes

1.Route需要用Routes包裹
2.组件用element表示
3.路由内有嵌套需要加*

<Routes>
     <Route path='/datatable/*'element={<Datatable/>} />
     <Route path='/schedule/*'element={<Datatable/>}/>
</Routes>

同时，子级路由的path前缀不需要加上父级的path，/为根目录。

Navigate

1.相比v5，删除Redirect改为Navigate，作用同为重定向
2.useNavigate代替userHistory和withRouter 作用为编程式导航
不管是否为路由组件，都可以使用

 <Route path="/" element={<Navigate to="/datatable" />} />

const navigate = useNavigate();   //注意要写在函数组件内，否则会报错 
navigate(-1); //后退
navigate('/index')
navigate('/',
{
	replace: //默认为false,
	state:
})

userParams

获取路由上传的的参数

path="home:/id:/data:"
to="home/1/'abcd'";
const {id,data} = userParams()

userRouters

注册路由表
可以把所有路由写在一个文件下

 const element=useRoutes([
   {
     path:"home",
     element:<HomePage/>
   },
 ])

使用{element}，作用等同于RoutesRoute等组件…

Outlet

占位组件，为嵌套路由占位

<Outlet/>   //可以使用useOutlet查看嵌套路由对象