React-router-dom

一、学习文档

v6文档：https://reactrouter.com

v5文档：https://v5.reactrouter.com/web/guides/quick-start

安装 cnpm install [email protected] -S

二、路由标签

1、Switch

Switch必须是Route、Redirect的直接父组件。

那么Switch有什么作用？

加快路由匹配的速度。

2、Redirect

用于重定向，和Route是兄弟关系，一般放在Route之后。

3、访问路由api

在react-router-dom路由系统中，不是每个React组件都能访问到路由api。只有那些被Route直接包裹过的React页面组件可以通过props访问到路由api。

那些未被Route直接包裹的React组件默认无法访问路由api，怎么办呢？

可以通过属性继承{...props}语法，把页面组件的props（路由API）手动向后代组件传递。

使用withRouter这个高阶组件，向组件中注入路由API。（非Hooks编程中用得比较多）

使用react-router-dom（v5）提供的hooks api直接使用路由API。

三、路由传参

params动态路由传参

query传参

四、嵌套视图

Route所包裹的组件中又使用了Route

在嵌套视图时，一定要用Switch把二级Route路由包裹起来。

在编写Route规则，不要“一刀切地加exact”，注意exact对 / 的影响

  function App() {

                return (

               

                   

               

                ) }

                function List() {

                return (

               

                   

               

                ) }

五、代码分割

React.Suspense 、React.lazy() 用React这两个API也能实现“代码分割”，但推荐使用@loadable/component