BrowserRouter is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

user_18561429 0
Viewed 187

Whenever I run my code I am getting the following errors on my web application:

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

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

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

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;
react-router-dom react-router reactjs javascript
3 Answers

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

user_124679930

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.

user_176637170

Issues

You've imported the BrowserRouter as a Route and likely have no router component wrapping the App/UI and providing a routing context. The Route component API also changed, gone are the component and render and children function props, all replaced by a single element prop taking a ReactNode, a.k.a. JSX.

Solution

Import the BrowserRouter correctly and render the components into it. Render the routed components on the Route component's element prop as JSX.

Example:

...
import { BrowserRouter as Routes, Routes, Route } from "react-router-dom";
...

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