如何使用react路由器实现分步导航(就像在幻灯片中一样)？

npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      {/* 应用程序的其他组件 */}
    </BrowserRouter>
  );
}

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

function StepNavigation() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/step1">Step 1</Link>
          </li>
          <li>
            <Link to="/step2">Step 2</Link>
          </li>
          <li>
            <Link to="/step3">Step 3</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/step1">
          <Step1 />
        </Route>
        <Route path="/step2">
          <Step2 />
        </Route>
        <Route path="/step3">
          <Step3 />
        </Route>
      </Switch>
    </div>
  );
}

function Step1() {
  return <h2>Step 1 Content</h2>;
}

function Step2() {
  return <h2>Step 2 Content</h2>;
}

function Step3() {
  return <h2>Step 3 Content</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <StepNavigation />
    </BrowserRouter>
  );
}