[英]Error: useHref() may be used only in the context of a <Router> component
**When i Write my My Nav Bar Component Content Directly in My Router Component. **当我直接在我的路由器组件中写入我的导航栏组件内容时。 It works Fine But When I write that content in a NavBar Component it Generates the following error
它工作正常但是当我在 NavBar 组件中写入该内容时它会生成以下错误
Error: useHref() may be used only in the context of a component.错误:useHref() 只能在组件的上下文中使用。 .**
.**
Im Using "react-dom": "^17.0.2", "react-router-dom": "^6.0.0-beta.6",
我正在使用
"react-dom": "^17.0.2", "react-router-dom": "^6.0.0-beta.6",
Following are my Components..以下是我的组件..
My NavBar Component:-我的导航栏组件:-
import { Link } from "react-router-dom";
// import styles from './NavBar.module.css';
export const NavBar = () => {
return (
<nav>
<Link to="/"> Home </Link>
<Link to="/about"> About </Link>
<Link to="/product"> Product </Link>
</nav>
);
}
My Route Component:-我的路线组成部分:-
import { BrowserRouter as Router, Switch, Route, Routes} from "react-router-dom";
// importing Component's
import { Home } from "./Components/Home/Home";
import { About } from "./Components/About/About";
import { Products } from "./Components/Products/Products";
import { ProductItems } from "./Components/ProductItems/ProductItems";
import {NavBar} from "./Components/NavBar/NavBar";
import { Fotter } from "./Components/Fotter/Fotter";
export const RouterConfig = () => {
return (
<Router>
<NavBar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route exact path="/product" component={Products} />
<Route path="/product/:id" component={ProductItems} />
<Route path="*" component={() => <h2>404 Not Found </h2>} />
</Switch>
{/* <Fotter />' */}
</Router>
);
};
import {BrowserRouter as Router} from "react-router-dom";
Use in components App.js or above in index.js and wrap your component in Router.在 index.js 中使用组件 App.js 或更高版本,并将您的组件包装在 Router 中。 Then the problem will disappear;-) In Your case I see two option:
然后问题就会消失;-) 在你的情况下,我看到两个选项:
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { BrowserRouter as Router } from "react-router-dom"; ReactDOM.render( <React.StrictMode> <Router> <App /> </Router> </React.StrictMode>, document.getElementById("root") );
OR use App Component instead of RouterConfig Component.或者使用App组件代替RouterConfig组件。
import { BrowserRouter as Router, Switch, Route, Routes} from "react-router-dom"; // importing Component's import { Home } from "./Components/Home/Home"; import { About } from "./Components/About/About"; import { Products } from "./Components/Products/Products"; import { ProductItems } from "./Components/ProductItems/ProductItems"; import {NavBar} from "./Components/NavBar/NavBar"; import { Fotter } from "./Components/Fotter/Fotter"; export const App = () => { return ( <Router> <NavBar /> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route exact path="/product" component={Products} /> <Route path="/product/:id" component={ProductItems} /> <Route path="*" component={() => <h2>404 Not Found </h2>} /> </Switch> {/* <Fotter />' */} </Router> ); };
I tried to explain it as best I could.我尽力解释它。 Hope this helps you;-) Best Greetings and Good Luck, If you're still confused, check out here => React Router V6 - Error: useRoutes() may be used only in the context of a <Router> component
希望这对您有所帮助;-) 祝您好运,如果您仍然感到困惑,请查看此处 => React Router V6 - 错误:useRoutes() 只能在 <Router> 组件的上下文中使用
export is not running properly and causing an error. export 运行不正常并导致错误。 Can you retype it like below and try?:
你能像下面这样重新输入并试试吗?:
import { Link } from "react-router-dom";
const NavBar = () => {
return (
<div>
<Link to="/"> Home </Link>
<Link to="/about"> About </Link>
<Link to="/product"> Product </Link>
</div>
);
}
export default Navbar;
Also, you don't need curly brace for import statement.此外,导入语句不需要大括号。
import NavBar from "./Components/NavBar/NavBar";
If problem still persists, you can check your file paths because you are repeating folder names twice, it looks suspicious to me.如果问题仍然存在,您可以检查文件路径,因为您重复了两次文件夹名称,这对我来说很可疑。 Maybe you mean this:
import NavBar from "./Components/NavBar";
也许你的意思是:
import NavBar from "./Components/NavBar";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.