React 组件路径也渲染主路径

Question

我有几个按钮可以使用 useHistory 将路径更改为另一个组件，这适用于所有页面，但在其中两个页面上，作为我的应用程序启动路径的“/”路径也呈现在我尝试的组件下方到达，所以它最终看起来像这样：

我的应用被包裹在一个带有精确路由路径的 BrowserRouter 中，这就是它在我的 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')
);

要访问我的 listcars 组件，我单击 AdminHomePage 组件中的一个按钮，该按钮使用 listcars 组件的 useHistory 路径，这就是我的 AdminHomePage 组件的外观：

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);

我的 listcars 组件看起来像这样：

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);

在尝试访问 /listcars 和 /listcustomers 时会发生这种情况，这可能是什么问题？我看到了一些 stackoverflow 答案，它们建议在路由中使用 'exact' 属性，但我已经在使用它，它在除这两个之外的所有路由上都运行良好。

谢谢！

编辑：

问题出在 index.js 中，我的 App 在 switch case 之外，这使它包含在所有路由中，现在看起来像这样，它解决了问题：

  <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

尝试清理（重构）代码，而不是干扰大量“精确”、“字符串”。

我看到每条路径的路由都不同（即：/adminloginpage、/adminhomepage），因此无需发送垃圾邮件“exact”、“strict”。到目前为止，我看到的唯一使用“精确”或“严格”的用例是这个。

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

因为“/profile”路径包含“/”路径，所以当你转到“/profile”时，Router会先匹配“/”而不是“/profile”，因为“/”在上面“ /个人资料”。

您可以将<Route exact path="/" ... /> 放在列表路由的末尾以删除“精确”。

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