React Router

首先要安装 react router dom： npm install react-router-dom
再来要在专案中引入 module：

import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";

<BrowserRouter>：
包在最外层，被 <BrowserRouter> 包起来的区域都可以使用 react-router-dom 所提供的功能
<HashRouter>：
包在最外层做使用，路径会有 #
<Switch>：
只有第一个符合 URL 的元件会被 render
<Route>：
只要符合目前的 URL 都会 render 指定的 UI
<Link>：
在 React 里面的 <Link to=""></Link> 代表 HTML 的 <a href=""></a>
<Redirect>：
重新定向

例如：
有个页面的 Navbar 有 Home 和 About，Home 和 Nav 有对应的文字
App.js

// App.js
import Home from "./Home";
import Nav from "./Nav";
import About from "./About";
import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

p.s 也可写成这样：

<Route path="/" exact component={Home} />
<Route path="/about" component={About} />

• exact 表示路径完全符合才会 render 该页面

Nav.js

// Nav.js
import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <nav>
      <ul>
        <Link to="/">
          <li>Home</li>
        </Link>
        <Link to="/about">
          <li>About</li>
        </Link>
      </ul>
    </nav>
  );
};

export default Nav;

此时点击 Home 时，网页上显示 Home，路径为 http://localhost:3000/

点击 About 时，网页上显示 About，路径为 http://localhost:3000/about

而如果我们将 App.js 的 BrowserRouter 改成 HashRouter

//App.js
import { HashRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Nav />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </HashRouter>
  );
}

export default App;

此时点击 Home，路径会变成 http://localhost:3000/#/

点击 About 时，路径会变成 http://localhost:3000/#/about