BrowserRouter is not a <Route> component. All component children of <Routes> must be a &-CodePudding

Whenever I compile my code I am getting the following error on the website application:

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

Error: [BrowserRouter] is not a component. All component children of must be a or <React.Fragment>

I am using "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0"

I am new to React ,I would be grateful if anyone could help.

Here is my

App.js

import React from "react";
import {BrowserRouter as Route, Routes} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"

import Navbar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <div className="container">
      <Navbar />
      <Routes>
          <Route path="/" exact component={ExercisesList} />
          <Route path="/edit/:id" component={EditExercise} />
          <Route path="/create"  component={CreateExercise} />
          <Route path="/user"   component={CreateUser} />  
      </Routes>
    </div>
  );
}

export default App;

CodePudding user response：

There is already an inbuild function Route in react-router-dom. So It is telling that you cannot call BrowserRouter as Route. You just need to do like below,

import React from "react";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css"
import Navbar from "./components/navbar.component";
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <div className="container">
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" exact component={ExercisesList} />
            <Route path="/edit/:id" component={EditExercise} />
            <Route path="/create"  component={CreateExercise} />
            <Route path="/user"   component={CreateUser} />  
          </Routes>
    <Router>
  </div>
);
}
export default App;

If you need a very good idea on react-router-dom configuration. Read https://medium.com/@sujith1396/a-basic-implementation-on-react-router-dom-v6-e9ff3b4e0529

CodePudding user response：

You are using BrowserRouter wrong. Inside of BrowserRouter component you can put your "static" components (as per Sujith Sandeep's answer):

<Router>
    <Navbar /> // this is a static component, it is shown always
    ...
</Router>

And then put Routes component inside of the same BrowserRouter, children of which are "swapped" based on your browsers URL:

<Routes> // this component renders only one of its children based on URL
    <Route path="/" exact component={ExercisesList} />
    <Route path="/edit/:id" component={EditExercise} />
    <Route path="/create" component={CreateExercise} />
    <Route path="/user" component={CreateUser} />
</Routes>

So ultimately what you missed was BrowserRouter component which handles all the components swaps.