使用creat-react-app创建的React项目并没有自带Router，需要自行去React Router官网安装。

Get Start

  1. yarn add react-router-dom  //注意使用typescript时还要安装支持typescript的
  3. yarn add --dev @types/react-router-dom

官方例子展示：

  1. import React from "react";
  2. import {
  3.   BrowserRouter as Router,
  4.   Switch,
  5.   Route,
  6.   Link
  7. } from "react-router-dom";
  8. export default function App() {
  9.   return (
  10.     <Router>
  11.       <div>
  12.         <nav>
  13.           <ul>
  14.             <li>
  15.               <Link to="/">Home</Link>
  16.             </li>
  17.             <li>
  18.               <Link to="/about">About</Link>
  19.             </li>
  20.             <li>
  21.               <Link to="/users">Users</Link>
  22.             </li>
  23.           </ul>
  24.         </nav>
  25.         {/* A <Switch> looks through its children <Route>s and
  26.             renders the first one that matches the current URL. */}
  27.         <Switch>
  28.           <Route path="/about">
  29.             <About />
  30.           </Route>
  31.           <Route path="/users">
  32.             <Users />
  33.           </Route>
  34.           <Route path="/">
  35.             <Home />
  36.           </Route>
  37.         </Switch>
  38.       </div>
  39.     </Router>
  40.   );
  41. }
  42. function Home() {
  43.   return <h2>Home</h2>;
  44. }
  45. function About() {
  46.   return <h2>About</h2>;
  47. }
  48. function Users() {
  49.   return <h2>Users</h2>;
  50. }

React路由

Hash路由与history路由

React路由支持Hash模式和History模式，History模式需要后端支持。

  1. import BrowserRouter as Router from "react-router-dom";  //History模式
  2. import HashRouter as Router from "react-router-dom";     //Hash模式

匹配顺序

React Router路由是自上而下逐一匹配，即先看上面的地址发现不匹配匹配下一个。由此，如果需要制作一个404页面路由就可以在最底部添加路由，即404路由：

  1. <Route path="*">  //匹配所有，即匹配除上述路由以外的所有路由
  2.     <NoMatch/>
  3. </Route>
  5. function NoMatch() {
  6.   return <h2>该页面不存在</h2>;
  7. }v

匹配精度

默认路由是模糊匹配，即路由/tag能匹配到/home,/home/1,/home/2…，当你输入的地址为/home/1时，Router所展示的界面是/home的。
要解决这个问题，需要引入精准匹配。

  1.  <Route path="/about" exact={true}>  //开启精准匹配，可简写为exact
  2.         <About />
  3. </Route>

default Router

  1. import {Redirect} from 'react-router-dom';
  2. <Redirect exact from="/" to="/home"/>    //默认页面跳转至/home页面

useParams

当需要获取url后的参数就需要使用该功能。官方介绍

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import {
  4.   BrowserRouter as Router,
  5.   Switch,
  6.   Route,
  7.   useParams
  8. } from "react-router-dom";
  10. function BlogPost() {                                                
  11.   let { slug } = useParams();                                           //获取到url后面的参数
  12.   return <div>Now showing post {slug}</div>;
  13. }
  15. ReactDOM.render(
  16.   <Router>
  17.     <Switch>
  18.       <Route exact path="/">
  19.         <HomePage />
  20.       </Route>
  21.       <Route path="/blog/:slug">                                  //匹配任意非/内容，名字为slug
  22.         <BlogPost />
  23.       </Route>
  24.     </Switch>
  25.   </Router>,
  26.   node
  27. );

的一个特殊版本，当呈现元素与当前URL匹配时，它将向呈现元素添加样式属性。并不支持

  1. //给选中的元素添加ClassName="selected"，然后通过CSS添加样式
  2. <NavLink to="/faq" activeClassName="selected">  
  3.   FAQs
  4. </NavLink>