如果使用 React 路由器 V4 更改路由的条件

Question

我有两种类型的路线，国家和内容：

• /国家
/
• 行业/排名
/
• 行业/观众
/
• 网站/排名
/
• 网站/受众
/
• 网站/转换

等。。。

当用户进入应用程序时，我必须验证他是否已经选择了我使用localStorage保存的国家/地区。

如果用户已经选择了国家/地区，则需要转到/industry/ranking，如果没有，则需要转到/country。

我收到有关代码更改路由的警告：

<Route> elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.

我的代码：

<Switch>
<Route exact path='/countries' component={Countries} />
{
current && (
<React.Fragment>
<Route exact path='/industry/ranking' render={() => <IndustryRanking country={current} />} />
<Route path='/industry/audience' render={() => <IndustryAudience country={current} />} />
<Route path='/website/ranking' render={() => <WebsiteRanking country={current} />} />
<Route path='/website/audience' render={() => <WebsiteAudience country={current} />} />
<Route path='/website/device' render={() => <WebsiteDevice country={current} />} />
<Route path='/website/conversion-orders' render={() => <WebsiteConversionOrders country={current} />} />
</React.Fragment>
)
}
{ !current ? <Redirect to='/countries' /> : <Redirect to='/industry/ranking' /> }
</Switch>

有没有办法仅使用路线来验证我的状况来改善这一点？

谢谢！

Answer 1

您可以简单地编写一个自定义组件来呈现路由或重定向到国家/地区，而不是有条件地呈现导致此警告的路由

const CustomRoute = (props) => {
const current = localStorage.getItem('country');
if(current) {
return <Route {...props} />
}
return <Redirect to='/countries' />
}

并像使用它一样使用

<Switch>
<CustomRoute exact path='/countries' component={Countries} />
<CustomRoute exact path='/industry/ranking' render={() => <IndustryRanking country={current} />} />
<CustomRoute path='/industry/audience' render={() => <IndustryAudience country={current} />} />
<CustomRoute path='/website/ranking' render={() => <WebsiteRanking country={current} />} />
<CustomRoute path='/website/audience' render={() => <WebsiteAudience country={current} />} />
<CustomRoute path='/website/device' render={() => <WebsiteDevice country={current} />} />
<CustomRoute path='/website/conversion-orders' render={() => <WebsiteConversionOrders country={current} />} />
<Redirect to='/industry/ranking' /> 
</Switch>