[JavaScript知识库]React路由

• 安装: cnpm i react-router-dom --save
• 使用方法: 组件内通过对象结构方法获取 react-router-dom 内置组件

1. HashRouter ,?BrowserRouter 表示路由的根容器, 与路由有关系的东西, 都要包裹在 跟路由里面, 而且一个网站中, 只需要使用一次
2. Route 表示一个路由规则, 也是一个占位符, 两个属性, path,? component? 与 Vue 中的 router-view 用法类似? path: 表示要匹配的路由以 '/'开头,? component 表示要展示的组件
3. Link 表示一个路由的链接, 一个属性 to, 在页面会渲染成一个 a 标签

• 路由传值

1. 可以通过动态路由的方式传值, Route path 路径后面 /:id(key)? Link 路径后面 /top/10 (value), 接收传值? 类组件:? this.props.match.params.属性名,? ?函数组件 props.match.params.属性名
2. 可以使用编程式导航, props.history.push('路由', {要传递的参数})

• Switch内置组件

1. Switch 具有排它性, 被它包裹的 route,? 相当于每一个 path 都是精准的匹配, 展示相对应的组件, 最后一个是一个不具备地址的路由地址, 当 Link 指向一个不存在的地址时, 没有精准匹配到地址, 就会显示到 C404路由,? 使用Switch 只会显示一个组件, 直到匹配到为止

   <Switch>
       <Route path="/home" component={ Home }></Route>
       <Route path="/video" component={ Home1 }></Route>
       <Route path="/book" component={ Home2 }></Route>
       <Route path="/renwu" component={ Home3 }></Route>
       <Route path="/user" component={ Home4 }></Route>
       <Route component={ C404 }></Route>
   </Switch>