score:2

Accepted answer

the component apis changed significantly from react-router-dom@5 to react-router-dom@6. the route components must be rendered within a routes component, and the component prop was replaced by a single element prop that takes a reactnode i.e. jsx.

import { browserrouter as router, routes, route} from "react-router-dom";
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 (
    <router>
      <div classname="container">
        <navbar />
        <br/>
        <routes>
          <route path="/" element={<exerciseslist />} />
          <route path="/edit/:id" element={<editexercise />} />
          <route path="/create" element={<createexercise />} />
          <route path="/user" element={<createuser />} />
        </routes>
      </div>
    </router>
  );
}

for more detail regarding all the changes between versions see the v5-v6 migration guide.


Related Query

More Query from same tag