安装 react-router-dom

yarn add react-router-dom --save

快速开始

import React from "react";
import ReactDOM from "react-dom";
// 引入 router 
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

import "./styles.css";
import Home from "./components/Home";
import About from "./components/About";
import Error from "./components/Error";

function App() {
  return (
    // 使用 Router 包裹需要用到路由的 jsx
    <Router>
      <div>
        <!--链接 相当于 a, to 指向路由地址-->
        <Link to="/">home </Link>
        <Link to="/about">about</Link>
      </div>
      // 使用 switch 以后只会渲染出一个组件
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
        <Route component={Error} />
      </Switch>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

动态路由

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

const MyRoute = ({ match }) => {
  return <div>{ match.params.id }</div>;
};


function App() {
  return (
    <Router>
      <Route path="/route/:id" component={MyRoute} />
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);