**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>
);
};
CodePudding user response:
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";
CodePudding user response:
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