react-router学习笔记（6）

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

const NoMatchExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/old-match">Old Match, to be redirected</Link>
        </li>
        <li>
          <Link to="/will-match">Will Match</Link>
        </li>
        <li>
          <Link to="/will-not-match">Will Not Match</Link>
        </li>
        <li>
          <Link to="/also/will/not/match">Also Will Not Match</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/" exact component={Home} />
        <Redirect from="/old-match" to="/will-match" />
        <Route path="/will-match" component={WillMatch} />
        <Route component={NoMatch} />
      </Switch>
    </div>
  </Router>
);

const Home = () => (
  <p>
    A <code><Switch></code> renders the first child <code><Route></code>{" "}
    that matches. A <code><Route></code> with no <code>path</code> always
    matches.
  </p>
);

const WillMatch = () => <h3>Matched!</h3>;

const NoMatch = ({ location }) => (
  <div>
    <h3>
      No match for <code>{location.pathname}</code>
    </h3>
  </div>
);

export default NoMatchExample;

　　知识点：

1、Switch

主要作用：

（1）匹配第一个Route或Redirect

（2）在最后设立一个未匹配的路径，通用显示。

2、Redirect

作用：重定向

from:老的地址

to:新的地址，如果访问from后老的地址，自动匹配到to后面新的地址。