reactjs - 错误:useHref() 只能在 a 的上下文中使用零件
问题描述
**当我直接在我的路由器组件中编写我的导航栏组件内容时。它工作正常但是当我在 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 或更高版本中使用,并将您的组件包装在 Router 中。然后问题就会消失;-) 在您的情况下,我看到两个选项:
- 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组件而不是RouterConfig组件。
- 应用程序.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 - 错误:useRoutes() 只能在 <Router> 组件的上下文中使用
推荐阅读
- wordpress - 具有 3 个类别的类别过滤器
- rhel - SAN 上的 Postgres
- javascript - 如何使用自定义文件列表(远程、服务器目录)在 SPA(浏览器端)上打开文件对话框
- batch-file - Windows 批处理脚本 ping 一小时
- python-3.x - 使用 Spacy 创建 FAQ 机器人的过程是什么?
- php - PHP在浏览器中显示带有readfile 2个单独文件
- java - 春季无法将pdf文件转换为字节[]
- c# - 通过 .Net Core 2.2、Azure Functions 对具有多种实现的装饰器模式进行依赖注入
- python - 从另一个进程启动一个进程的问题
- selenium - 如何在浏览器中获取 REAL 源代码?