问React抛出一个react路由器``useLocation()‘错误

EN

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './components/Container/App';
import store from './app/store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root') || new DocumentFragment());
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import PageLayout from '../UI/PageLayout/PageLayout';
import Home from '../Home/Home';
import Portal from '../Portal/Portal';
import ProductSearch from '../ProductSearch/ProductSearch';
import { InternalRoutes } from '../../common/enums/internal-routes';
import Inbox from '../Inbox/Inbox';

const App = () => {
  return (
    <PageLayout >
      <Routes>
        <Route path={InternalRoutes.Default} element={<Home />} />
        <Route path={InternalRoutes.Home} element={<Home />} />
        <Route path={InternalRoutes.Inbox} element={<Inbox />} />
        <Route path={InternalRoutes.Portal} element={<Portal />} />
        <Route path={InternalRoutes.ProductSearch} element={<ProductSearch />} />
      </Routes>             
    </PageLayout>
  );
};

export default App;

import React, { FC, ReactNode } from 'react';
import { Logo, PrimaryNavigation } from 'my-component-lib';
import { InternalRoutes as Routes } from '../../../common/enums/internal-routes';

interface I_PageLayoutProps {
  children: ReactNode;
}

const PageLayout:FC<I_PageLayoutProps> = ({children}) => {
  return (
    <div className="body_grid">
      <header>
        <Logo />
        <PrimaryNavigation navigationLinks={Object.values(Routes) as unknown as Array<keyof typeof Routes>} />
      </header>
      <div className={'main_Grid'} >{children}</div>
    </div>
  );
};

export default PageLayout;