React中路由的基本使用

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组件，可以用用于指定当前导航高亮

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

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

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

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

1. 只要pathname以path开头就算匹配成功

2. 匹配成功就加载对应组件；

3. 整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

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路径