React Router 安裝及使用

React Router的安裝及基本使用方式如下。

React Router讓React應用程式能輕易地透過url路徑選擇要導向並渲染的組件。

參考「React 使用Create React App建立React應用程式」建立一個React應用。

開啟命令列輸入npm install react-router-dom安裝React Router函式庫到本機。

$ npm install react-router-dom

開啟React應用專案目錄的App.js貼上下面內容。

App.js

import './App.css';

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

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

<Switch>尋找其中的<Route>把第一個符合path的內容渲染到畫面。

瀏覽器開啟http://localhost:3000的效果如下。注意url和顯示的頁面變化。

• React Router - Quick Start