Error: useHref() may be used only in the context of a component

Question

**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

Error: useHref() may be used only in the context of a component. .**

Im Using "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>
  );
};

For future reference, I believe the problem is you're using tags, while in react-router 6, you should use instead. — JavoSN, Nov 26 '21 at 19:49
I was using BrowserRouter as the direct parent of Routes, I see that instead that BrowserRouter or HashRouter or whatever you're using should go in the index file- — chrismarx, Jan 18 '22 at 21:24

score 7 · Answer 1 · answered Oct 10 '21 at 08:50

import {BrowserRouter as Router} from "react-router-dom";

Use in components App.js or above in index.js and wrap your component in Router. Then the problem will disappear ;-) In Your case I see two option:

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")
);

OR use App Component instead of RouterConfig Component.

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>
  );
};

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

Abdulhakim · Answer 2 · 2021-10-09T18:21:01.837

0

export is not running properly and causing an error. 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";

edited Oct 09 '21 at 18:21

answered Oct 09 '21 at 18:15

Abdulhakim

620
8
11

Abdulhakim ! I had Tried all of Your suggestion not worked... same error again,, (The Importing section in which u say im repeating is fine , no problem with it b/c in NavBar folder im having NavBar.js ..That's why im writing it) – Shahbaz Oct 09 '21 at 18:47
Then I guess problem lies with your custom hook useHref. You may find this question useful: https://stackoverflow.com/questions/53028117/react-hooks-error-hooks-can-only-be-called-inside-the-body-of-a-function-compon – Abdulhakim Oct 10 '21 at 08:20

Error: useHref() may be used only in the context of a component

2 Answers2

Linked