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?