Question

我有两种类型的路线，国家和地区：

/国家/地区
/行业/排名
/行业/受众
/网站/排名
/网站/受众
/网站/转换

等...

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

如果用户已经选择了国家/地区，则需要转到 /行业/排名，否则请转到 /国家/地区。

我收到有关通过代码更改路线的警告：

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

如果有条件使用React Router V4更改路线

1 个答案: