React js：错误：useLocation() 只能在 <Router> 组件的上下文中使用答案

【问题标题】：React js: Error: useLocation() may be used only in the context of a <Router> componentReact js：错误：useLocation() 只能在 <Router> 组件的上下文中使用
【发布时间】：2021-03-22 14:01:12
【问题描述】：

我使用 react router v6 并且每次我在我的主文件中使用初始化进行身份验证时都会显示此错误。我无法在互联网上找到解决方案。我只想在有用户时渲染一些路线，但现在它不渲染任何东西。

AuthNavigator

import React, { useState, useEffect } from 'react';
import app from './firebase';
import { Router, Routes, Route } from 'react-router-dom';

import AuthStack from './stacks/AuthStack';
import AppStack from './stacks/AppStack';
import StaticStack from './stacks/StaticStack';

function AuthNavigator() {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState(() => app.auth().currentUser);

  useEffect(() => {
    const unsubscribe = app.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
      if (initializing) {
        setInitializing(false);
      }
    });

    // cleanup subscription
    return unsubscribe;
  }, []);

  if (initializing) return 'Loading....';

  return (
    <Router>
      <Routes>
        <Route path="*" element={<StaticStack />} />
        <Route path="auth/*" element={<AuthStack user={user} />} />
        <Route path="app/*" element={<AppStack user={user} />} />
      </Routes>
    </Router>
  );
}
export default AuthNavigator;

App.js

import React from 'react';
import './App.css';
import AuthNavigator from './AuthNavigator';
import { Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <AuthNavigator />
    </Router>
  );
}

export default App;

【问题讨论】：

我修好了。路由器的导入错误。昨天我在使用 BrowserRouter 时遇到错误

标签： javascript reactjs react-router-dom

【解决方案1】：

我遇到了同样的问题。我的问题是由于以下原因。我有一个 Header 组件，它由 NavLink 组成，它是一个路由器组件。我将这个 Header 组件放在 App 组件中。我的 App 组件是这样的：

function App() {
  return(
      <Header/>
      <Router>
        <Routes>
          <Route path="/" element={<Homepage/>}/>
          <Route path="/shop" element={<Shop/>}/>
          <Route path="/signin" element={<Signin/>}/>
        </Routes>
      </Router>
  )
}

在上面的 App 组件中，我将 Header 组件放在了 Router 之外。由于在 Header 组件中我使用了 NavLink 这是一个路由器组件导致此错误。然后我将 Header 组件移动到 Router 组件中，然后它工作正常。最后我的代码看起来像这样：

function App() {
  return(
      <Router>
        <Header/>
        <Routes>
          <Route path="/" element={<Homepage/>}/>
          <Route path="/shop" element={<Shop/>}/>
          <Route path="/signin" element={<Signin/>}/>
        </Routes>
      </Router>
  )
}

【讨论】：

【解决方案2】：

确保index.js 中的 App 组件像这样用BrowserRouter 包裹

const app = (
  <Provider store={store}>
      <BrowserRouter>
          <App />
      </BrowserRouter>
  </Provider>
);

【讨论】：

【解决方案3】：

我在测试中遇到了同样的错误。我正在测试的组件包含一个NavLink 组件，并且我没有在测试中呈现Router。使用BrowserRouter 包装我的相关组件后，此错误消失了。

【讨论】：

【解决方案4】：

已经包裹在路由器中了吗？

如果您的组件已经包装在路由器中。确保从react-router-dom 导入useLocation 而不是react-router。这对我有用。

【讨论】：

【解决方案5】：

试试这个：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

【讨论】：