React-router-dom v6.x的使用_muou_hang

未知 02-07 1276

React-router-dom v6.x的使用前言

react-router-dom v6的具体内容可以在react-router-dom文档上查看，但是是英文版，英语水平不好的同学可以在网上找大佬的翻译。本人在公司搭了一个简单的后台管理系统的模板，今天想升级一下依赖，随便研究了一下react-router-dom6.x版的使用。总的来说，变化不是特别大。现在我把常用的几个变动总结一下，供大家参考：

1. 原先的<Switch>替换成了<Routes>

按照网上大佬的说法，<Routes>不仅完美的替代了<Switch>，语义上更能让人理解之外，还做了优化，但这部分我还没有去研究，粗略翻看了GitHub上的文档，也没有看到比较全面的说法。其用法也简单，直接替换之前的<Switch>即可。

// v6之前版本 <BrowserRouter> <Switch> <Route /> ...some routes </Switch> </BrowserRouter> // v6版本 <BrowserRouter> <Routes> <Route /> ...some routes </Routes> </BrowserRouter> 2. Route中的component替换成了element

不仅仅是component替换成了element，里面的内容也从引入的变量名变成了组件，从字面意思上来理解，component原本就是组件的意思，但只传了一个组件名。element是元素的意思，我还是比较喜欢用component，然后用传组件的方式。值得一提的是，这里的element不仅仅能放组件，也能放其他的元素，因此用element也比较合理。

// v6之前版本 <BrowserRouter> <Switch> <Route path="/index" component = {Index} /> ...some routes </Switch> </BrowserRouter> // v6版本 <BrowserRouter> <Routes> <Route path="/index" element = {<Index />} /> ...some routes </Routes> </BrowserRouter> 3. 新增<Outlet />组件以及嵌套路由新写法

<Outlet />组件是一个视图窗口，单单这么讲比较抽象。他其实就是当你使用嵌套路由的时候，子组件的渲染窗口。用过Vue的人都知道，vue的router是有嵌套路由的，但是react在v6之前都没有一个比较简单方便的路由，他的嵌套路由实现是用组件套路由方式实现。现在有了嵌套路由后就方便很多，跟vue的路由一样，使用起来得心应手，也比较符合逻辑。<Outlet />就提供了在父页面的路由的一个子页面渲染窗口，也就是说，当路由找到子页面后，会通过<Outlet />渲染到页面上。

// v6 之前 <BrowserRouter> <Switch> // Layout中写子路由 <Route path='/' component = {Layout} /> </Switch> // 或者这样写 <Switch> <Layout> <Switch> ...子路由 </Switch> </Layout> </Switch> </BrowserRouter> // v6 <BrowserRouter> <Routes> <Route path='/' element={<Layout><Outlet /></Layout>} > <Route path='index' element={<Home />} /> <Route path='manager'> <Route path='userManager' element={<UserManager />} /> </Route> </Route> </Routes> </BrowserRouter> // 你也可以将route抽离 interface IRouteProps extends RouteProps{ children?: IRouteProps[] } const route:IRouteProps[] = [ {path: 'index', element: <Home />}, { path: 'examples', element: <Outlet />, children: [ {path: 'i18n', element: <I18n />}, {path: 'request', element: <Request />}, {path: 'dataflow', element: <DataFlow />}, { path: 'admin', element: <Outlet />, children: [ {path: 'manager', element: <Manager />} ] }, ]}, ]; const routerRender = (routes:IRouteProps[]) => { return routes?.map((item, index) => { return <Route key={index} path={item.path} element={item.element}> {item.children ? routerRender(item.children) : null} </Route>; }); }; 4. 路由跳转 useNavigate()

在v6版本中，已经将useHistory()取消，在跳转时可以使用 useNavigate()进行跳转。当replace为true时，执行的是重定向操作。

import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('url', {replace: true});

以上四个变动，足以让你在开发时搞定路由这块。如还有问题，欢迎留言。