React component path rendering home path too

Question

I have several buttons to change path to another component with useHistory, and this works on all pages ,but on two of them, the "/" path which is my app starting path also gets rendered below the component I was trying to reach, so it ends up looking like this :

My app is wrapped in a BrowserRouter with exact Route paths, this is how it looks in my index.js:

   ReactDOM.render(
  <React.StrictMode>
    <Router>
          <Switch>
            <Route exact strict path="http://localhost:3000/customerloginpage" component={RedirectCustomerLoginComponent}/>
            <Route exact strict path="/adminloginpage" component={AdminLoginPage}/>
            <Route exact strict path="/adminhomepage" component={AdminHomePage}/>
            <Route exact strict path="/listcustomers" component={ListCustomers}/>
            <Route exact strict path="/listcars" exact component={ListCars}/>
            </Switch>
      <App/>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

To reach my listcars component, I click a button in my AdminHomePage component which uses a useHistory path to the listcars component, this is how my AdminHomePage component looks :

function AdminHomePage() {

 const history = useHistory();

 const logoutButtonClicked = () =>{ 
    let path = '/adminloginpage'; 
    history.push(path);
  }

  const listCustomersButtonClicked = () =>{ 
    let path = '/listcustomers'; 
    history.push(path);
  }

  const listCarsButtonClicked = () => { 
    let path = '/listcars'; 
    history.push(path);
  }

    return (
        <div className="App-header">
        <button id="logoutButton" onClick={logoutButtonClicked}>Logout</button>
        <br/>
        <button id="listCustomersButton" onClick={listCustomersButtonClicked}> List Customers</button>   
        <button id="listCarsButton" onClick={listCarsButtonClicked}> List Cars</button>       
        </div>
        
    )

    
}

export default withRouter(AdminHomePage);

and my listcars component looks like this :

import React, { Component } from "react";
import CarService from "../services/CarService";
import { withRouter } from "react-router";


class ListCars extends Component{

    constructor(props){
        super(props)
        this.state =  {
            cars:[]
        }
    }

    componentDidMount() {
        CarService.getCars().then((response) => {
            this.setState({cars: response.data})
        })
    }

    render(){
        return (
            <div> 
                <h1 className="text-center">List of Cars </h1>
                <table className="table table-striped">
                    <thead>
                        <tr>


                            <td>Car ID</td>
                            <td>Car Name</td>
                            <td>Car Model</td>
                            <td>Car Daily Cost</td>

                        </tr>
                    </thead>

                    <tbody>
                        {
                            this.state.cars.map(
                                car =>
                                <tr key= {car.carId}>
                                    <td>{car.carId}</td>
                                    <td>{car.carName}</td>
                                    <td>{car.carModel}</td>
                                    <td>{car.dailyPrice}</td>
                                </tr>
                            )
                        }
                    </tbody>
                </table>

            </div>
        )
    }
}

export default withRouter(ListCars);

This happens when trying to reach /listcars and /listcustomers , what could be the issue of this? I saw a few stackoverflow answers which suggested using the 'exact' attribute in the routes, but I was already using this and it works good on all routes except these two.

Thanks!

EDIT :

The issue was within the index.js , my App was outside the switch case, which made it be included on all routes , now it looks like this and it resolved the issue :

  <Router>
          <Switch>
            <Route exact strict path="http://localhost:3000/customerloginpage" component={RedirectCustomerLoginComponent}/>
            <Route exact strict path="/adminloginpage" component={AdminLoginPage}/>
            <Route exact strict path="/adminhomepage" component={AdminHomePage}/>
            <Route exact strict path="/listcustomers" component={ListCustomers}/>
            <Route exact strict path="/getcars" exact component={GetCars}/>
            <App/>
            </Switch>
      
    </Router>

Answer 1

Try cleaning (refactoring) code instead of jamming lots of "exact", "string".

I see each path's route is different (i.e: /adminloginpage, /adminhomepage) so no need to spam "exact", "strict". The only use case I see so far using "exact" or "strict" is this.

<Route exact path="/" ... /> // dashboard component
<Route path="/profile" ... /> 
<Route path="/mail" ... /> 

Because "/profile" path include "/" path so when you go to "/profile", Router will match "/" first than "/profile" as "/" is above "/profile".

You can put <Route exact path="/" ... /> to the end of list routes to remove "exact".

<Route path="/profile" ... /> 
<Route path="/mail" ... /> 
<Route path="/" ... /> // dashboard component