React Routes fail to route to different paths-CodePudding

I tried to lead from the home page to "/allUsers" page. The homepage has a link that directs to the all Users page. But when I click from the home page to all User page it does not show any content. The link to all Users is "http://localhost:3000/allUsers"

App.js:

import './App.css';
import { Routes, Route } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import Home from './components/Home';
import allUsers from './pages/allUsers/allUsers';
import airportEmployee from './pages/AirportEmployee/airportEmployee';
import airlineEmployee from './pages/AirlineEmployee/airlineEmployee';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/allUsers" element={<allUsers />} />
        <Route path="/airline-employee" element={<airlineEmployee />} />
        <Route path="/airport-employee" element={<airportEmployee />} />
      </Routes>
    </div>
  );
}

export default App;

Here is the Home.js file

const Home = () => {
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link
        underline="hover"
        color="inherit"
        href="/allUsers"
        fontSize="large"
      >
        All Users
      </Link>
      <Link
        underline="hover"
        color="inherit"
        href="/airport-employee"
        fontSize="large"
      >
        Airport Employee
      </Link>
      <Link
        underline="hover"
        color="inherit"
        href="/airline-employee"
        fontSize="large"
      >
        Airline Employee
      </Link>
    </Breadcrumbs>
  );
};

export default Home;

CodePudding user response：

Change this in app.js:

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
function App() {
  return (
    <div className="App">
<Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/allUsers" element={<allUsers />} />
        <Route path="/airline-employee" element={<airlineEmployee />} />
        <Route path="/airport-employee" element={<airportEmployee />} />
      </Routes>
</Router>
    </div>
  );
}

Change in Home.js:

import App from "components/App";
import {Link} from "react-router-dom";

<Link to="/allUsers">All Users</Link>

CodePudding user response：

I think route has a 'exact' keyword to match exactly the url you want.

<Route path="/allUsers" exact element={<allUsers/>} />