在react-router v4中嵌套路由

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Topics = () => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to="/topics/topic1">Topic 1</Link>
      </li>
      <li>
        <Link to="/topics/topic2">Topic 2</Link>
      </li>
    </ul>

    <Route path="/topics/topic1" component={Topic1} />
    <Route path="/topics/topic2" component={Topic2} />
  </div>
);

const Topic1 = () => <h3>Topic 1</h3>;
const Topic2 = () => <h3>Topic 2</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

export default App;