[英]React js: Error: useLocation() may be used only in the context of a <Router> component
im using react router v6 and i every time i use initializing for authentication in my main file it shows this error.我使用的是 React Router v6,每次我在主文件中使用初始化进行身份验证时,它都会显示此错误。 i cant find a solution in the inte.net for it.
我无法在 inte.net 中找到解决方案。 i want to render some routes only when there is a user but now it doesnt render anything.
我只想在有用户时呈现一些路线,但现在它不呈现任何东西。
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应用程序.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;
Already wrapped in Router?已经包裹在路由器中?
if your component is already wrapped in a Router.如果您的组件已经包装在路由器中。 Make sure you are importing
useLocation
from react-router-dom
instead of react-router
.确保您从
react-router-dom
导入useLocation
而不是react-router
。 this worked for me.这对我有用。
Don't import nor use Routes
this component is not exported by 'react-router-dom'
不要导入也不使用
Routes
这个组件不是由'react-router-dom'
导出的
Make sure that your App component in index.js
is wrapped with BrowserRouter
like this确保
index.js
中的 App 组件像这样用BrowserRouter
包装
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
I had the same issue.我遇到过同样的问题。 My issue is because of the following reason.
我的问题是由于以下原因。 I had a Header component which consists of NavLink which is a router component.
我有一个Header组件,它由作为路由器组件的NavLink组成。 I placed this Header component inside the App component.
我将这个Header组件放置在App组件中。 My App component was like this:
我的App组件是这样的:
function App() {
return(
<Header/>
<Router>
<Routes>
<Route path="/" element={<Homepage/>}/>
<Route path="/shop" element={<Shop/>}/>
<Route path="/signin" element={<Signin/>}/>
</Routes>
</Router>
)
}
In the above App component, I have placed Header component outside of Router.在上面的 App 组件中,我将 Header 组件放置在 Router 之外。 Since in the Header component I have used NavLink which is a Router component caused this error.
由于在Header组件中,我使用了作为路由器组件的NavLink导致此错误。 Then I moved Header component into the Router component then it worked fine.
然后我将Header组件移动到路由器组件中,然后它工作正常。 Finally my code looked like this:
最后我的代码看起来像这样:
function App() {
return(
<Router>
<Header/>
<Routes>
<Route path="/" element={<Homepage/>}/>
<Route path="/shop" element={<Shop/>}/>
<Route path="/signin" element={<Signin/>}/>
</Routes>
</Router>
)
}
Try the above code from Sebastian Maj:试试上面 Sebastian Maj 的代码:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
I had the same error coming up from inside a test.我在测试中遇到了同样的错误。 The component I was testing contained a
NavLink
component, and I wasn't rendering a Router
in the test.我正在测试的组件包含一个
NavLink
组件,并且我没有在测试中渲染Router
。 This error disappeared after wrapping my component in question with BrowserRouter
.用
BrowserRouter
包装我的组件后,此错误消失了。
I had this error because Vite was bundling two copies of the same version of react-router-dom... check the outputted bundle for * React Router DOM
and see how many copies there are.我有这个错误是因为 Vite 捆绑了相同版本的 react-router-dom 的两个副本...检查输出的捆绑包中的
* React Router DOM
并查看有多少副本。
If that's the case, the solution will differ.如果是这种情况,解决方案将有所不同。 In my scenario I think it's because I was referencing other local npm packages using
file:
... once I switched to a npm workspace that fixed it.在我的场景中,我认为这是因为我使用
file:
...一旦我切换到修复它的 npm 工作区。
in my case, I faced this error when I used the HOC
and context provider and placed my Routing
component as the context.provider's
child, and export my Provider component by HOC like this:就我而言,当我使用
HOC
和上下文提供程序并将我的Routing
组件放置为context.provider's
子组件时,我遇到了这个错误,并通过 HOC 导出我的 Provider 组件,如下所示:
class Provider extends Component {
render() {
return (
<Context.Provider
value={{
something: this.state.something
}}
>
<Routing />
</Context.Provider>
);
}
}
export default HOC(Provider)
In case you run into this problem when running a test, don't forget to wrap your import of App in Router as well.如果您在运行测试时遇到此问题,请不要忘记将 App 的导入也包含在 Router 中。 My crude example is below.
我的粗略例子如下。
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { App } from '../App';
test('renders Box', () => {
render(
<BrowserRouter>
<App />
</BrowserRouter>
);
const boxElement = screen.getByLabelText('box-outline');
expect(boxElement).toBeInTheDocument();
});
So i fixed like this structure所以我固定喜欢这个结构
index.js index.js
import { BrowserRouter } from 'react-router-dom'
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
App.js应用程序.js
import { Route, Routes, Navigate } from 'react-router-dom'
<Layout>
<Routes>
<Route path="/" element={<Navigate to="/home" />} />
<Route path="/home" element={<Home />} />
{...}
<Route path="*" element={<NotFound />} />
</Routes>
</Layout>
Layout.js布局.js
<Fragment>
<Header></Header>
<main className="container">{props.children}</main>
</Fragment>
Header.js Header.js
import { Link, NavLink } from 'react-router-dom'
<header className={classes.header}>
<nav>
<NavLink
className={(navData) => (navData.isActive ? classes.active : '')}
to="/search"
>
Search
</NavLink>
</nav>
</header>
App.test.js应用程序.test.js
import { BrowserRouter } from 'react-router-dom';
it('renders learn react link', async () => {
render(<BrowserRouter><App /></BrowserRouter>)
const linkElement = await screen.findByText(/home/i)
expect(linkElement).toBeInTheDocument()
})
I had this problem when using {useLocation} from 'react-router-dom'
我在使用
{useLocation} from 'react-router-dom'
时遇到了这个问题
function App() {
const { pathname, hash, key } = useLocation();
//function using pathname hash and key
return(
<Router>
<Header/>
<Routes>
<Route path="/" element={<Homepage/>}/>
<Route path="/shop" element={<Shop/>}/>
<Route path="/signin" element={<Signin/>}/>
</Routes>
</Router>
)
}
throws the same error even with the in the correct place I fixed it by explicitly wrapping the useLocation() within the router即使在正确的位置也会引发相同的错误我通过在路由器中显式包装 useLocation() 来修复它
function App() {
return(
<Router>
<Header/>
<Inner/>
</Router>
)
}
function Inner() {
const { pathname, hash, key } = useLocation();
//function using pathname hash and key
return(
<Routes>
<Route path="/" element={<Homepage/>}/>
<Route path="/shop" element={<Shop/>}/>
<Route path="/signin" element={<Signin/>}/>
</Routes>
)
}
im my case, the problem was putting BrowserRouter inside App.js file, solved it by moving this into index.js file and wrapping it around App.js我的情况是,问题是将 BrowserRouter 放入 App.js 文件中,通过将其移至 index.js 文件并将其包装在 App.js 中来解决
Former Index.js前 Index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<React.StrictMode>
<PersistGate persistor={persistor} >
<App/>
</PersistGate>
</React.StrictMode>
</Provider>
);
reportWebVitals();
Former App.js前 App.js
import { BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
const App = () => {
const {pathname} = useLocation()
return (
<div className='app'>
<BrowserRouter>
<Routes>
<Route path='/*' element={<LandingPage />} />
</Routes>
</BrowserRouter>
</div>
);
};
export default App;
New Index.js新索引.js
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<React.StrictMode>
<PersistGate persistor={persistor} >
<BrowserRouter >
<App/>
</BrowserRouter>
</PersistGate>
</React.StrictMode>
</Provider>
);
reportWebVitals();
New App.js新建 App.js
import { Routes, Route, useLocation} from "react-router-dom";
const App = () => {
const {pathname} = useLocation()
return (
<div className='app'>
<Routes>
<Route path='/*' element={<LandingPage />} />
<Route path='/registeration' element={<Registration />} />
</Routes>
</div>
);
};
export default App;
Try this:尝试这个:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.