React App 抛出 React 路由器 `useLocation()` 错误

Question

I've Created a component which works in Storybook, it's been published to a private repo. When I consume this navigation component which uses <navLink> I get a Uncaught Error: useLocation() may be used only in the context of a <Router> component . I've searched for this and keep getting the same answer. Which is to warp the app in a <BrowserRouter> tag. However my app IS wrapped in a <BrowserRouter> tag and I still get this error. Any help would be welcome as I'm banging my head off the screen here.

Index file

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>
);

App file

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;

PageLayout file

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;

Answer 1

You can solve this problem by removing <BrowserRouter> from Index file and wrapping <Routes> tag in App file

New Index

   import React from 'react';
    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}>
                    <App />
            </Provider>
        </React.StrictMode>
    );

New App file

import React from 'react';
import { Routes, Route,BrowserRouter  } 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 >
          <BrowserRouter>
            <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> 
           </BrowserRouter>              
        </PageLayout>
    );
};

export default App;

I hope this will solve the problem