如何使用react路由器dom嵌套路由

npm install react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

export default App;

import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Overview from './Overview';
import Profile from './Profile';

function Dashboard({ match }) {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li>
          <Link to={`${match.url}/overview`}>Overview</Link>
        </li>
        <li>
          <Link to={`${match.url}/profile`}>Profile</Link>
        </li>
      </ul>

      <Switch>
        <Route path={`${match.path}/overview`} component={Overview} />
        <Route path={`${match.path}/profile`} component={Profile} />
      </Switch>
    </div>
  );
}

export default Dashboard;

// Overview.js
import React from 'react';

function Overview() {
  return <h3>Overview Page</h3>;
}

export default Overview;

// Profile.js
import React from 'react';

function Profile() {
  return <h3>Profile Page</h3>;
}

export default Profile;