如何使用路由器在react中具有键值对的组件之间进行切换

npm install react-router-dom

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

render() {
  return (
    <Router>
      {/* 路由配置 */}
    </Router>
  );
}

render() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

render() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </div>
      <Switch>
        {/* 路由配置 */}
      </Switch>
    </Router>
  );
}

render() {
  return (
    <Router>
      <div>
        <ul>
          {/* 导航链接 */}
        </ul>
      </div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}