仅显示某些路由的组件- React

if (condition) {
  return <Component />;
} else {
  return null;
}

return condition ? <Component /> : null;

return condition && <Component />;

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

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>Welcome to the about page!</p>
    </div>
  );
};

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

  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          {showAboutPage && (
            <li>
              <Link to="/about">About</Link>
            </li>
          )}
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        {showAboutPage && <Route path="/about" component={About} />}
      </Switch>
    </Router>
  );
};

export default App;