react-router学习笔记（10）

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

const AmbiguousExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/about">About Us (static)</Link>
        </li>
        <li>
          <Link to="/company">Company (static)</Link>
        </li>
        <li>
          <Link to="/kim">Kim (dynamic)</Link>
        </li>
        <li>
          <Link to="/chris">Chris (dynamic)</Link>
        </li>
      </ul>

      {/*
          Sometimes you want to have a whitelist of static paths
          like "/about" and "/company" but also allow for dynamic
          patterns like "/:user". The problem is that "/about"
          is ambiguous and will match both "/about" and "/:user".
          Most routers have an algorithm to decide for you what
          it will match since they only allow you to match one
          "route". React Router lets you match in multiple places
          on purpose (sidebars, breadcrumbs, etc). So, when you
          want to clear up any ambiguous matching, and not match
          "/about" to "/:user", just wrap your <Route>s in a
          <Switch>. It will render the first one that matches.
      */}
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/company" component={Company} />
        <Route path="/:user" component={User} />
      </Switch>
    </div>
  </Router>
);

const About = () => <h2>About</h2>;
const Company = () => <h2>Company</h2>;
const User = ({ match }) => (
  <div>
    <h2>User: {match.params.user}</h2>
  </div>
);

export default AmbiguousExample;

　　动态路径