關於react-router最新版本的使用

如今react-router已經更新到了5.1.1版本，在一些使用方法上較以前有了不少改變，現作初步列舉，之後會陸續更新。

關於引入react-router和基本使用

舊版本中引入react-router的方式先安裝:

npm install --save react-router

而後引入：

import { Router, Route, Link } from 'react-router'

而如今須要安裝react-router-dom包：

npm install react-router-dom

而後引入：

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

須要值得注意的一點是，舊版本能夠引入react-router包和react-router-dom包其中之一，而如今如果引入前者，在使用Link時則會報錯：

關於Link的使用，現行版本要求必須置於Router內，且Route也必須置於Switch內，若是沒有Switch,則其餘路由不會覆蓋默認路由，即其它頁面切換時，默認頁面仍然存在：

因此，Switch是必不可少的，現配上代碼：

import React from "react";
import '../src/scss/App.scss';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../src/components/Home';
import About from '../src/components/About';
import Users from '../src/components/Users';

 function App() {
  return (
    <Router className="App">
      <div className="App-header">
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;