尽管将组件包装在路由器标签中，但仍出现 UseLocation 错误

Question

我是反应路由器的新手，目前正在使用

BrowserRouter

中的

react-router-dom

版本

react-router-dom": "^6.21.0"

每当路径发生变化时，我都会使用

useLocation()

动态设置存储变量。

这就是我正在做的事情：

App.tsx：

function App() {
    const location = useLocation();
    const setMode= useStore((state) => state.setMode);
    useEffect(() => {
        setMode(location.pathname.includes(Constants.AppRoutes.IMAGE_PATH));
    }, [location.pathname, setMode]);

    const routesBody = (
        <div className="main">
            <Comp1/>
            <Comp2/>
            <Comp3/>
        </div>
    );

    const routes = [
        { path: "/", element: <Navigate replace to="bla1" /> },
        {
            path: "/bla1",
            element: routesBody,
        },
        {
            path: "/bla2",
            element: routesBody,
        },
    ];

    return (
        <BrowserRouter>
            <Routes>
                {routes.map((route) => (
                    <Route key={route.path} path={route.path} element={route.element} />
                ))}
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Main.tsx：

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
       <App /> 
    </React.StrictMode>,
);

此设置会导致以下错误

未捕获错误：useLocation() 只能在 组件的上下文中使用。

我做了什么：

将

<BrowserRouter>

标签从

app.tsx

移动到

main.tsx

，使

main.tsx

看起来像这样：

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
);

虽然这似乎解决了问题并且路由有效，但它导致我的所有测试用例在渲染时都有以下子句，否则所有测试用例将无法渲染。

render(
            <BrowserRouter>
                <App />
            </BrowserRouter>,
        );

为什么我不能将

<BrowserRouter>

放入我的 App.tsx 中？ 我错过了什么吗？

Answer 1

useLocation

使用 BrowserRouter 提供的

React Context

。为了能够从 Context 中读取数据，组件需要将 Context 提供者（在本例中为

BrowserRouter

）作为 React 树的祖先。