[英]Uncaught Error: useLocation() may be used only in the context of a <Router> component
I'm getting this error while using useLocation
in Navbar
component:在导航
Navbar
组件中使用useLocation
时出现此错误:
Uncaught Error:
useLocation()
may be used only in the context of a<Router>
component未捕获的错误:
useLocation()
只能在<Router>
组件的上下文中使用
import React, { useEffect, } from 'react'
import { Link, useLocation } from 'react-router-dom'
const Navbar = () => {
let location = useLocation();
useEffect(() => {
console.log(location);
}, [location]);
return (
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/navbar">Navbar</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
<form className="d-flex" role="search">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
)
}
export default Navbar
The error is informing you that the Navbar
component necessarily needs to be rendered within the routing context provided by one of the routers exported by react-router
/ react-router-dom
.该错误通知您
react-router
组件必须在由Navbar
/ react-router-dom
导出的路由器之一提供的路由上下文中呈现。
Example:例子:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from '../path/to/Navbar';
const App = () => (
<Router> // <-- router provides routing context to descendents
<Navbar /> // <-- rendered within a router component
<Routes>
<Route path="/" element={<h1>Home</h1>} />
... other routes ...
</Routes>
</Router>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.