[英]Error: useLocation() may be used only in the context of a <Router> component
I have installed react-router-domV6-beta.我已经安装了 react-router-domV6-beta。
By following the example from a website I am able to use the new option useRoutes I have setup page routes and returning them in the App.js file.通过遵循网站上的示例,我可以使用新选项 useRoutes 我已经设置了页面路由并将它们返回到 App.js 文件中。
After saving I am getting the following error:保存后出现以下错误:
Error: Error: useLocation() may be used only in the context of a component.
错误:错误:useLocation() 只能在组件的上下文中使用。
App.js应用程序.js
import "./App.css";
import react, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import _ from "lodash";
import Cast from "./Cast";
import list from "./list";
import Footer from "./Footer";
import DetailLayout from "./DetailLayout";
function App() {
const [charnames, setCharnam] = useState("");
function charname(names) {
setCharnam(names);
}
function castDetail(everycast) {
return (
<Cast
key={everycast.id}
url={everycast.url}
name={everycast.name}
castp={charname}
/>
);
}
const cc = charnames;
const p = "/" + cc;
//const p="/haha h";
const res = p.replace(/ /g, "");
return (
<div className="App">
<div className="overview">{list.map(castDetail)}</div>
{/* <DetailLayout /> */}
{console.log(charnames)}
<Router>
<Cast />
<Routes>
<Route exact path={res} element={<DetailLayout />} />
</Routes>
</Router>
<Footer />
</div>
);
}
export default App;
Cast.js演员.js
import react from "react";
import { NavLink } from "react-router-dom";
export default function Cast(props) {
function setpath() {
props.castp(props.name);
}
const path = "/" + props.name;
return (
<div className="cast">
{/* <Link to="/about">About</Link> */}
{/* <NavLink to="/about">About</NavLink> */}
<NavLink to={path}>
<img onClick={setpath} src={props.url} />{" "}
</NavLink>
<p>{props.name}</p>
</div>
);
}
this error simply says wrap your useLocation() inside这个错误只是说把你的 useLocation() 包裹在里面
<Router> </Router>
all react-router-dom hooks and functions should be used inside所有 react-router-dom 钩子和函数都应该在里面使用
<BrowserRouter> </BrowserRouter>
otherwise they simply don't work否则他们根本行不通
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.