Question

我是第一次使用React Router。在我的主要组件中，我有以下路线：

<Route exact path="/" component={HomeContainer} />
<Route exact path="/countries" component={CountrySearchContainer} />
<Route exact path="/:countryCode" component={CountryDetailsContainer} />

第一条和最后一条路线都很好。

但是，当我转到/ countries时，好像我的CountrySearchContainer和CountryDetailsContainer都被渲染了，而实际上我只是希望前者被渲染。

据我了解，当我进入/ countries时，React路由器假定：countryCode为'countries'。如何防止这种情况发生？

Answer 1

此处，当URL为/countries或/{countryCode}时，组件{CountrySearchContainer}和{CountryDetailsContainer}将全部呈现，因为它们都与路径匹配。要解决此问题，您需要使用<Switch>。

首先导入React-dom开关

import {Switch, Route} from 'react-router-dom'

然后为路径相似的路由添加切换条件，并在最后一条路由中删除精确值，因为:countryCode是动态参数

<Route exact path="/" component={HomeContainer} />
<Switch>
     <Route exact path="/countries" component={CountrySearchContainer} />
     <Route path="/:countryCode" component={CountryDetailsContainer} />
</Switch>

通过在此处使用<Switch>，它将开始寻找给定选项之间的匹配<Route>。

如果您需要更多信息，请询问。

如何使带有参数的React Router路由与另一条路由分开

1 个答案: