简述如何使用4.0版本的 React Router？

npm install react-router-dom

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

// 导入组件
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} /> {/* 默认匹配 */}
      </Switch>
    </Router>
  );
}

export default App;

<Route path="/about" render={() => <About />} />

<Route path="/" children={() => <div>Always Rendered</div>} />

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Route path="/dashboard/overview" render={() => <div>Overview</div>} />
      <Route path="/dashboard/settings" render={() => <div>Settings</div>} />
    </div>
  );
}

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

import { Link } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

import { NavLink } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();
  const navigateToAbout = () => {
    history.push('/about');
  };

  return <button onClick={navigateToAbout}>Go to About</button>;
}

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();
  return <div>Current Path: {location.pathname}</div>;
}

import { useParams } from 'react-router-dom';

function Profile() {
  const { userId } = useParams();
  return <div>Profile of user {userId}</div>;
}