How to avoid react router params collisions?

Viewed 67

Find the following Switch below:

  <Switch>
    <Route exact path='/portfolios/:page/:portfolioId?/:questionId?' component= 
    {Portfolios} />
  </Switch>

Portfolios Component also contains a Switch, Which is the following:

  <Switch>
    ...
    <Route exact path='/portfolios/random/:portfolioId' component={Subscription} />
    <Route exact path='/portfolios/questions/:questionId' component={RiskFunnelQuestions} />
    <Redirect exact from='/portfolios/banner/:portfolioId' to={this.getRedirectionURL()} />
  </Switch>

Now the problem is inside the getRedirectionURL function

getRedirectionURL() {
  const {
    match: {
      params: { portfolioId }
    }
  } = this.props;
  if(!portfolioId){
    return '/anything/else';
  }
  console.log(portfolioId) // is returning 1
 // handling some conditions I'm not writing the full functionalities  
 return `/portfolios/random/${portfolioId}`
}

Let's suppose the requested link is /portfolios/questions/1 so the getRedirectionURL is assuming the portfolioId is 1 which is semantic error! Portfolio Id expected is undefined or null.

It seems taking into consideration the path order /portfolioId then the /questionId.

How can I avoid this confusion?

0 Answers
Related