CODEWITHSUNDEEP
javascriptreactjsreact-router
Italo Borges
Italo Borges

Reputation: 2554

If condition to change route using React Router V4

I have two types of routes, countries and content:

etc...

When the user enters the application, I have to verify if he already chose a country, which I'm saving using localStorage.

If the user has the country already chosen, he needs to go to /industry/ranking, if don't, to /countries.

I'm receiving a warning about the route changing by code:

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

My code:

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

Is there a way to improve this using just the routes to verify my condition?

Thanks!

Upvotes: 9

Views: 5412

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282030

You can simply write a custom component that renders the Routes or redirects to the country instead of conditionally rendering the Routes which is causing this warning

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

and use it like

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

Upvotes: 8

Related Questions