react路由器查询参数字符串加载默认页面'/‘

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

function DefaultPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const defaultPage = queryParams.get('defaultPage');

  // 根据查询参数中的 defaultPage 值加载默认页面
  switch (defaultPage) {
    case 'home':
      return <Home />;
    case 'about':
      return <About />;
    default:
      return <NotFound />;
  }
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function NotFound() {
  return <h1>404 Not Found</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={DefaultPage} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;