What is wrong with the structure of my 'BrowserRouter', 'Routes' and 'Route-CodePudding

I am attempting to follow a tutorial while learning React.JS and I am running into an issue because the tutorial is using an older version of React and I am stuck trying to figure out how to use BrowserRouter, Routes, and Route.

Can anyone assist me in trying to re-structure the code so it works with the updated version of React? I have tried reading through documentation and tried to mix around a few solutions with no success. Any help is much appreciated!

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

import Navbar from "./components/navbar.component.js";
import PortfolioList from "./components/portfolio-list.component";
import EditPortfolio from "./components/edit-portfolio.component";
import CreatePortfolio from "./components/create-portfolio.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Routes>
      <Navbar />
      <br/>
      <Route path="/" exact component={PortfolioList} />
      <Route path="/edit/:id" exact component={EditPortfolio} />
      <Route path="/create" exact component={CreatePortfolio} />
      <Route path="/user" exact component={CreateUser} />
    </Routes>
  );
}

export default App;

The following is the 'error' I'm generating on runtime:

Error: [Navbar] is not a 'Route' component. All component children of 'Routes' must be a 'Route' or 'React.Fragment'

CodePudding user response：

Navbar is not a route so no need to keep it in there.

function App() {
  return (
  <div>
    <Navbar />
    <br/>
    <Routes>
      <Route path="/" exact component={PortfolioList} />
      <Route path="/edit/:id" exact component={EditPortfolio} />
      <Route path="/create" exact component={CreatePortfolio} />
      <Route path="/user" exact component={CreateUser} />
    </Routes>
  </div>
  );
}

CodePudding user response：

Only Route components and React.Fragments can be a child of the Routes component, and vice-versa. Move the non-Route components out of Routes. The Route component API also changed in version 6, there is no longer render and component props, the routed components are passed to the element prop as JSX, and routes are now always exactly matched, so there's no longer the exact prop as well.

function App() {
  return (
    <>
      <Navbar />
      <br/>
      <Routes>
        <Route path="/" element={<PortfolioList />} />
        <Route path="/edit/:id" element={<EditPortfolio />} />
        <Route path="/create" element={<CreatePortfolio />} />
        <Route path="/user" element={<CreateUser />} />
      </Routes>
    </>
  );
}

CodePudding user response：

you can use the "BrowserRouter" tag followed by the "Switch" tag then you can now use the "Route" tag to specify the path of each component

CodePudding user response：

you can use the "BrowserRouter" tag followed by the "Switch" tag then you can now use the "Route" tag to specify the path of each component.

    return (
        <>
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={DashBoard} />
                    <Route path="/specialistes" exact component={Specialistes} />
                    <Route path="/findgarages" exact component={FindGarage} />
                    <Route path="/garages" exact component={Garages} />
                </Switch>
            </BrowserRouter>
        </>
    )````