使用类组件在React路由器v4中嵌套路由

npm install react-router-dom

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

import React from 'react';
import { Route } from 'react-router-dom';

import AboutPage from './AboutPage';
import TeamPage from './TeamPage';
import HistoryPage from './HistoryPage';

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
        <Route exact path="/about" component={AboutPage} />
        <Route path="/about/team" component={TeamPage} />
        <Route path="/about/history" component={HistoryPage} />
      </div>
    );
  }
}

export default About;