React Router:如何有条件地渲染具有相同路由的不同组件

npm install react-router-dom

yarn add react-router-dom

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

const Home = () => <div>Home Component</div>;
const About = () => <div>About Component</div>;

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};

const Home = () => <div>Home Component</div>;
const Dashboard = () => <div>Dashboard Component</div>;

const App = () => {
  const isAuthenticated = true;

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        {isAuthenticated ? (
          <Route path="/dashboard" component={Dashboard} />
        ) : (
          <Route path="/login" component={Login} />
        )}
      </Switch>
    </BrowserRouter>
  );
};