--- highlight: atom-one-dark theme: fancy --- 上周突然心血来潮，去 [react-router](https://github.com/remix-run/react-router) 的 github 看了下，好家伙，最新版本居然已经到了 ~~`6.0.0-beta.8`~~ (已于2021.11.4发布 [6.0.0](https://reactrouter.com/) 正式版)，且全部用 ts 重写（表示好评！！），具体变化可看 [Migrating React Router v5 to v6](https://github.com/remix-run/react-router/blob/main/docs/guides/migrating-5-to-6.md)。不看不知道，一看吓一跳，发现变化还是挺大的，不过，很多 `api` 也变得比之前好用。那么，下面我会尽可能提供各种例子介绍一些常用 `api` 的改动，让大家更快熟悉最新的用法。 ## \全部改为\ 与 `Switch` 相比，`Routes` 的主要优点是: - `Routes` 内的所有 `` 和 `` 是相对的。这使得 `` 和 `` 中的代码更精简、更可预测 - 路由是根据最佳匹配而不是按顺序选择的 - 路由可以嵌套在一个地方，而不是分散在不同的组件中（当然也可以写在子组件中），而且嵌套的 parent route 的 `path` 不用加`*` ```js import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom"; function App() { return ( } /> {* 上面的优点一:path是相对的 *} {* 上面的优点三:path 不用加'*' *} }> {* 上面的优点二: 无需按顺序 *} {* 上面的优点三: 路由可以嵌套在一个地方 *} } /> } /> ); } function Users() { return (

{* Outlet后面会讲 *}

); } ``` 注意上面的第三点，**嵌套的 parent route 的 path 不用加\***。但如果不是嵌套，而是分散在子组件中，就需要尾部加上`*` ```js function App() { return ( } /> {* 不是嵌套就需要尾部加上* *} } /> ); } function Users() { return ( }> } /> } /> ); } function UsersLayout() { return (

); } ``` ## \ ### \ Route 的 render 或 component 改为 `element` ```jsx /> function Profile({ animate }) { const params = useParams(); const location = useLocation(); } ``` 通过这种形式： - 可以向组件传 props，如上面的 `animate={true}` - 因为有了 hook 的出现，所以不必再通过 renderProps 向组件传递路由的一些 props，我们可以通过`useParams`、`useLocation` 就可以拿到这些信息当然还有另外一个重要的原因是因为 `v6` Route 的 children 是用于嵌套路由，如下 ```js function App() { return ( } /> }> } /> } /> ); } ``` 那么我们要显示 `OwnUserProfile `组件的话通过 `/users/me` 就可以定位到了，这看起来相当的直观 ### \ `v6` 简化了 `path` 的格式，只支持两种动态占位符： - `:id` 样式参数 - `*` 通配符，只能在 path 的末尾使用，如`users/*` 举个 🌰 以下的 path 是正确的： ```js path = '/groups' path = '/groups/admin' path = '/users/:id' path = '/users/:id/messages' path = '/files/*' // 通配符放在末尾 path = '/files/:id/*' path = '/files-*' ``` 以下的 path 是错误的： ```js path = '/users/:id?' // ? 不满足上面两种格式 path = '/tweets/:id(\d+)' // 有正则，不满足上面两种格式 path = '/files/*/cat.jpg'// 通配符不能放中间 ``` ### \ `caseSensitive: boolean`，用于正则匹配 path 时是否开启 ignore 模式，即匹配时是否忽略大小写源码中部分 ```js // 根据path生成是regexpSource是否要ignore const matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i"); ``` ### \ `index` 即表示是否是主路由，如果设置为 true 的话不能有 children，如下面的`} />` ```js function App() { return ( }> } /> } /> ) } function Home() { return (

Home

) } function Basic() { return (

Welcome to the app!

下面()中的就是真实的Link组件

}> } /> }/> ...

); } ``` 那么`/basic`会自动显示`` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/009a8235523d491283803e5c0afa9534~tplv-k3u1fbpfcp-zoom-1.image) ### \ 与 \ 上面的很多例子中都有 Layout，这个究竟有什么用？和`Outlet`又有什么关系？我们看下代码（和下面的图片搭配看效果更佳） ```js function App() { return ( }> } /> } /> ) } // 下图的最外面的红色框 function Layout() { return ( <>

主页面

auth
basic

{* 下图蓝色框 *} ) } function Basic() { return (

Welcome to the app!

下面()中的就是真实的Link组件

}> } /> }/> ...

); } // 下图绿色框 function BasicLayout() { return (

); } // 下图黄色框 function Home() { return (

Home

) } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f217e88f29d540c7b370f829f0687092~tplv-k3u1fbpfcp-zoom-1.image) 从代码和上面示意图我们可以得知，组件``一般作为 parent route 的element，除了渲染一些公共的UI, 还有用于渲染子路由的``，而代码中的``渲染的是``，``的``又有``，但其渲染的是`}>`匹配到路由的 element。从上面我们可以得到的结论是： **组件 `` 一般作为 parent route 的element，除了渲染一些公共的UI外，其中的`` 的作用类似插槽，用于匹配子路由的 element** ### useRoutes 上面我们都是把 Route 作为 Routes 的 children ```js function App() { return ( }> } /> } /> ) } ``` 但是我们还可以通过 `useRoutes` 生成对应的 element ```js import { useRoutes } from 'react-router-dom' function App() { const element = useRoutes([ { path: '/', element: , children: [ { path: 'auth/*', element: }, { path: 'basic/*', element: } ] } ]) return ( {element} ) } ``` 这种配置项让我们可以更清晰地看出路由的嵌套结构 ## \ ### \ 在`v5`中，如果 `to` 不以 `/` 开头的话会让人有点迷，因为这取决于当前的 URL。比如当前 URL 是`/user`, 那么`` 会渲染成 ``；而如果是 `/users/`，那么又会渲染成 ``。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64c55b4fcf6e46d4a2aab80da24a1fb3~tplv-k3u1fbpfcp-zoom-1.image) 那么，在 `v6` 中解决了上面那种让人迷惑的现象。在 `v6` 中，无论当前 URL 是 `/user` 还是 `/users/`， `` 都会渲染成 ``。也就是说 `to` 更像我们常用的 `cd` 命令行，我们看下更多例子 ```js // 当前 URL 为 /app/dashboard 或 /app/dashboard/ => => => => // 命令行中, 当前目录为 /app/dashboard cd stats # pwd is /app/dashboard/stats cd ../stats # pwd is /app/stats cd ../../stats # pwd is /stats cd ../../../stats # pwd is /stats ``` 有一点要特别注意，当 `` 匹配多个 URL 片段时， `` 不总是渲染为 ``，这种情况下的 `to='..'` 是基于父级 Route 的 path，例子如下 ```js function App() { return ( } /> ); } ``` 如果还不理解，我们可以举个极端例子，比如 route 的 path 为`basic/*`，当前 URL 为`/basic/auth/home`，如下代码 ```js function App() { return ( } /> ... } /> ); ``` 那么上面的 `to="../auth"` 是要跳转到 `/basic/auth` 还是`/auth` （答案是`/auth`）？所以为了避免 `*` 通配符可以匹配多种路径的情况，统一为 `to='..'` 是基于父级 Route 的 path ### \ 即点击后可以给 `to` 传对应的 `state` ### \ `replace:boolean`，默认 false，即跳转路由要用 `push` 还是 `replace` ### \ target 类型为 ```ts type HTMLAttributeAnchorTarget = | '_self' | '_blank' | '_parent' | '_top' | (string & {}); ``` 这个其实我们几乎没用到，这里只简单介绍下可以传入的值 ## useHistory 被干掉了，换成了 useNavigate 使用方法如下： ```js // v6 import { useNavigate } from "react-router-dom"; function App() { const navigate = useNavigate(); function handleClick() { navigate("/home"); } return (

); } ``` ### naviaget(to)默认就是 history.push ``` // v6 navigate('/home'); //v5 history.push('/home') ``` ### naviaget(to, { replace: true })就是 history.replace ``` // v6 navigate('/home', { replace: true }); //v5 history.replace('/home') ``` ### naviaget(to: number)就是 history.go ```js // v6 import { useNavigate } from "react-router-dom"; function App() { const navigate = useNavigate(); return ( <> ); } // v5 import { useHistory } from "react-router-dom"; function App() { const { go, goBack, goForward } = useHistory(); return ( <> ); } ``` ### naviagete 与\一样，输入参数类似 cd 命令行 ```js // 当前 URL 为 /app/dashboard 或 /app/dashboard/ => => => => // 当前 URL 为 /app/dashboard 或 /app/dashboard/ const navigate = useNavigate() navigate('stats') => '/app/dashboard/stats' navigate('../stats') => '/app/stats' navigate('../../stats') => '/stats' navigate('../../../stats') => '/stats' // 命令行中, 当前目录为 /app/dashboard cd stats # pwd is /app/dashboard/stats cd ../stats # pwd is /app/stats cd ../../stats # pwd is /stats cd ../../../stats # pwd is /stats ``` ## 结语好了，到了这里也差不多了，我们总结下一些变化： - `` 全部改为 `` - `Route` 的 `render` 和 `component` 改为 `element`，且可以嵌套路由 - `Route` 还可以通过传入嵌套数组给useRoutes生成对应的element - `to`、`navigate`、`path` 不以 `/` 开头都是相对路径，与 `cd` 命令行类似 - `` 是个插槽，可以渲染匹配到的子路由如果还想了解更多例子，可以打开[react-router-source-analysis](https://github.com/baozouai/react-router-source-analysis)，有更多的例子。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3902f62aac1c4a11a06b0ddd701e5d32~tplv-k3u1fbpfcp-zoom-1.image) 到目前为止，这应该、大概、也许算国内最新的 React-Router 的源码分析了吧，有兴趣的可以看看，觉得可以的话请不要吝啬您的⭐ 。 ## 最后之后应该会写 `React-Router` 最新的源码分析文章，如果我不鸽的话🐶🐶，哈哈。 ![end-cover.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69b6f314fcae469b82eba44486c1ce70~tplv-k3u1fbpfcp-watermark.image?) > **感谢留下足迹，如果您觉得文章不错😄😄，还请动动手指😋😋，点赞+收藏+转发🌹🌹** ## 往期文章 [ **翻译翻译，什么叫ReactDOM.createRoot** ](https://juejin.cn/post/7004648498423398431) [**翻译翻译，什么叫JSX**](https://juejin.cn/post/7005725282363506701)