React Router
    安装

    1. yarn add react-router-dom

    安装 TS 声明文件

    1. 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";
    9. export default function App() {
    10.   return (
    11.     <Router>
    12.       <div>
    13.         <nav>
    14.           <ul>
    15.             <li>
    16.               <Link to="/">Home</Link>
    17.             </li>
    18.             <li>
    19.               <Link to="/about">About</Link>
    20.             </li>
    21.             <li>
    22.               <Link to="/users">Users</Link>
    23.             </li>
    24.           </ul>
    25.         </nav>
    27.         {/* A <Switch> looks through its children <Route>s and
    28.             renders the first one that matches the current URL. */}
    29.         <Switch>
    30.           <Route path="/about">
    31.             <About />
    32.           </Route>
    33.           <Route path="/users">
    34.             <Users />
    35.           </Route>
    36.           <Route path="/">
    37.             <Home />
    38.           </Route>
    39.         </Switch>
    40.       </div>
    41.     </Router>
    42.   );
    43. }
    45. function Home() {
    46.   return <h2>Home</h2>;
    47. }
    49. function About() {
    50.   return <h2>About</h2>;
    51. }
    53. function Users() {
    54.   return <h2>Users</h2>;
    55. }

    页面渲染在 中
    React Router 有两种模式：

    • History：有后台服务器需配置所有路径到首页才能用
    • Hash：没用后台服务器只能用 Hash