// 使用前全局安装
npm install react-router-dom
yarn add react-router-dom

React-router三部曲

Router

React-Router提供两种路由模式，

hashRuoter
BrowserRouter

import {
  // HashRouter  as Router
  BrowserRouter as Router,  // browserRouter就是history模式
  Switch,
  Route,
  Link
} from "react-router-dom";

//将我们需要导航的路由由Router包裹起来

<Router>
</Router>

Switch and Route

Switch和JavaScript中的循环判断类似，也是层层判断是否符合我们指向路由

<Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
</Switch>

Link

提供围绕应用程序的声明式，可访问的导航

属性：to: string

链接位置的字符串表示形式，是通过将位置的路径名，搜索和哈希属性连接在一起而创建的。

<Link to="/about">About</Link>

NavLink

Link的特殊版本，用法类似Link，其中一个属性activeClassName：string

元素处于活动状态时提供的类。默认给定的类是active。这将与className道具一起加入。

<Link to="/about"  activClassName='selected'>About</Link>

浅谈react-router-dom

Router

Switch and Route

Link

NavLink