Use the latest version of the react-router

Now react-router has been updated to version 5.1.1, with a lot of changes compared to the previous method in some use, is a preliminary list, the future will continue to update.

About introduction react-router and basic use

Introduction react-router in the way of the old version before installing:

npm install --save react-router

Then introduced:

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

And now we need to react-router-dom package:

npm install react-router-dom

Then introduced:

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

It is noteworthy point is needed, the old version can be introduced into the react-router package and react-router-dom package one of them, and now if the introduction of the former, it will error when using the Link:

Use Link on the existing version requirements must be placed Inside, and Must be placed Inside, if there is no , Other routes will not override the default route, that is, to switch to another page, the default page still exists:

So, Bip be less, now coupled with the code:

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;