gpt4 book ai didi

javascript - react js : Error: useLocation() may be used only in the context of a component

转载 作者:行者123 更新时间:2023-12-05 00:25:34 34 4
gpt4 key购买 nike

我使用 react 路由器 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;

应用程序.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;

最佳答案

我遇到过同样的问题。我的问题是由于以下原因。
我有一个 标题 组成的组件导航链接 这是一个路由器组件。我把这个 标题 中的组件应用 零件。我的 应用 组件是这样的:

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 之外。由于在 标题 我使用过的组件 导航链接 这是一个路由器组件导致此错误。然后我搬了 标题 组件进入路由器组件,然后它工作正常。最后我的代码看起来像这样:
function App() {
return(
<Router>
<Header/>
<Routes>
<Route path="/" element={<Homepage/>}/>
<Route path="/shop" element={<Shop/>}/>
<Route path="/signin" element={<Signin/>}/>
</Routes>
</Router>
)
}

关于javascript - react js : Error: useLocation() may be used only in the context of a <Router> component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66747556/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com