如何避免路由器参数发生冲突?

时间:2020-03-10 14:53:50

标签: javascript reactjs react-router

在下面找到以下Switch

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

Portfolios组件还包含一个开关,如下所示:

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

现在问题出在getRedirectionURL函数内部

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

让我们假设请求的链接为/portfolios/questions/1,因此getRedirectionURL假设PortfolioId为1,这是语义错误!预期的投资组合ID为undefinednull

似乎先考虑路径顺序/ portfolioId,再考虑/ questionId。

如何避免这种混乱?

0 个答案:

没有答案