React路由的基本使用

1.安装路由的插件

npm i react-router-dom@5.3.0

2.导入包并使用

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

3.使用HashRouter包裹整个应用，一个项目中只会有一个Router

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'
export default function App () {
  return (
    <Router>
      <div className="app">
          <link to="/login" />
          <NavLink to="/layout">
        <Switch>
          <Route path="/login" exact component={Login} />
          <Route path="/layout" component={Layout} />
          {/* 增加一个404 */}
          <Redirect form="/" exact to="/login" />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  )
}

4.link和NavLink的区别

link和NavLink最后都会被解析成a标签。但是NavLink会当前点击的哪一项会拥有类名

5.route的作用和格式

作用：决定路由匹配规则

格式：

<Route path="/xx/xx" component={组件}></Route>

6.exact 会实现精准匹配

 <Route path="/login" exact component={Login} />

7.Switch与404

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

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

        <Switch>
          <Route path="/login" exact component={Login} />
          <Route path="/layout" component={Layout} />
          <Redirect form="/" exact to="/login" />
          <Route component={NotFound} />
        </Switch>

8.页面跳转 Redirect

作用：比如匹配根路径 我就让他跳转到某一个路由

简而言之就是 你从根路径来我就让你去哪个路径

<Redirect from="/" exact to="/comment" />

9.匹配全部 

不写path 除了以上页面就会匹配这个页面  一般适用去404

<Route component={NotFound} />