React路由的使用

在React中路由的使用和vue-router非常相似

1. 先下包

react-router-dom@5.3.0   可以自己用npm yarn cnpm 进行下载,我使用的是5.3.0版本

2. 导入并使用

import { HashRouter as Router , Route, Link } from 'react-router-dom'
 
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <Router>
        <Link to="/comment">评论</Link>
        <Link to="/search">搜索</Link>
 
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

        这样就实现了一个简易的点击路由跳转

3. 使用HashRouter包裹整个应用

        一个项目中只会有一个 我上面是经过as改名之后的

        两种常用 Router：HashRouter 和 BrowserRouter

• HashRouter：使用 URL 的哈希值实现

        监听 window 的 hashchange 事件来实现的

• BrowserRouter：使用 H5 的 history.pushState() API 实现

        监听 window 的 popstate 事件来实现的

4. 使用Link指定导航链接

        指定导航链接方式有两种 分别是Link 和 NavLink

        Link组件最终会渲染成a标签，用于指定路由导航

        Link组件无法展示哪个link处于选中的效果

        NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮

<NavLink to="/xxx" activeClassName="active">链接</NavLink>

        当前组件被点击时 会添加一个 active 类,可以通过修改这个类 可以修改被选中是的样式

5. 使用Route指定路由规则(哪个路径展示哪个组件)

默认路由路径匹配规则是: 模糊匹配规则

• 只要pathname以path开头就算匹配成功
• 匹配成功就加载对应组件；
• 整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

6. 精确匹配 :exact

        只有路径完全一致才被匹配上

7.Switch 

        用Switch组件包裹多个Route组件。

        在Switch组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件      

 <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/article" component={Article} />
    <Route path="/article/123" component={ArticleDetail} />
</Switch>

8. 处理404页

        思路： 不设置path属性，将404页对应的路由放在switch内部的最后位置        

<Switch>
    <Route path="/" exact component={Home} />
    <Route path="/article" component={Article} />
    <Route path="/article/123" component={ArticleDetail} />
    <Route component={Page404} />
</Switch>

Redirect

<Redirect from="/" exact to="/comment" /> 当精准匹配到/ 时 ,跳转到comment路径