一、基础使用

代码

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

import About from "./views/About";
import User from "./views/User";
import Home from "./views/Home";

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/user">Users</Link>
              </li>
            </ul>
          </nav>
          <Switch>
            <Route path="/about">
              <About></About>
            </Route>
            <Route path="/user">
              <User></User>
            </Route>
            <Route path="/">
              <Home></Home>
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

三大元素

• 路由器<Router>：React程序的路由跳转，都是建立在路由器的基础上的；
• 路由匹配器<Switch>、<Route>：路由的跳转都是路由匹配器来匹配的，根据跳转的路径，匹配到合适的组件；
• 导航<Link>：通过导航来控制路由的跳转；