错误:useHref()只能在路由器&>组件的上下文中使用 [英] Error: useHref() may be used only in the context of a <Router> component
本文介绍了错误:useHref()只能在路由器&>组件的上下文中使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
**当我将我的导航栏组件内容直接写入我的路由器组件时。它工作得很好,但当我在NavBar组件中编写该内容时,它会生成以下错误
错误:useHref()只能在组件的上下文中使用。 .**
我正在使用 "react-dom": "^17.0.2", "react-router-dom": "^6.0.0-beta.6",
以下是我的组件..
我的导航栏组件:-
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>
);
}
我的路由组件:-
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";
在index.js中的组件App.js或更高版本中使用,并将组件包装在路由器中。
然后问题就会消失;-)
在您的案例中,我看到两个选项:
- index.js
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")
);
或使用应用组件而不是路由器配置组件。
- App.js
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>
);
};
我尽我所能地解释了。希望这对你有帮助;-)致以最好的问候和好运! 如果您仍然不明白,请点击此处查看。 React Router V6 - Error: useRoutes() may be used only in the context of a <Router> component
这篇关于错误:useHref()只能在路由器&>组件的上下文中使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文