错误：useHref() 只能在 <Router> 组件的上下文中使用

IT技术 reactjs react-router react-router-dom
2021-05-14 05:46:32

**当我直接在我的路由器组件中编写我的导航栏组件内容时。它工作正常但是当我在 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>
  );
};
2个回答
import {BrowserRouter as Router} from "react-router-dom";

在 index.js 中的 App.js 或更高版本的组件中使用，并将您的组件包装在 Router 中。然后问题就会消失;-) 在你的情况下，我看到两个选项：

  1. 索引.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组件。

  1. 应用程序.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> 组件的上下文中使用

导出未正常运行并导致错误。您可以像下面那样重新输入并尝试吗？：

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;

此外，导入语句不需要大括号。 import NavBar from "./Components/NavBar/NavBar";

如果问题仍然存在，您可以检查您的文件路径，因为您重复了两次文件夹名称，我觉得这很可疑。也许你的意思是： import NavBar from "./Components/NavBar";

其它你可能感兴趣的问题
上一篇单元测试：如何在react中模拟 axios？ 下一篇获取错误：在可拖动中添加 isDragDisabled 标志时，在可拖动中找到拖动句柄元素