Reaction js：Error：useLocation()只能在路由器&>组件的上下文中使用 [英] React js: Error: useLocation() may be used only in the context of a <Router> component

问题描述

使用REACTION路由器V6的IM和我每次在我的主文件中使用初始化进行身份验证时，都会显示此错误。我在网上找不到解决这个问题的办法。我希望仅在有用户但现在不呈现任何内容的情况下呈现某些路线。

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

数据-lang="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;

推荐答案

我遇到了同样的问题。我的问题是因为以下原因。 我有一个头组件，它由NavLink组成，它是一个路由器组件。我将此头组件放在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的外部。因为在头组件中，我使用的NavLink是导致此错误的路由器组件。然后，我将Header组件移到路由器组件中，然后它工作正常。最后，我的代码如下所示：

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

这篇关于Reaction js：Error：useLocation()只能在路由器&>组件的上下文中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！