有条件的反应路由器 [英] React router with conditions

问题描述

我的 react 组件如下所示:

 class App extends React.Component {使成为() {调试器；如果(！this.props.isUserExist){返回 (<div><路由精确路径="/" component={DashboardPage}/>

);}返回 (<div><开关><路由精确路径="/" component={HomePage}/><路由精确路径="/list" component={ListPage}/><路由组件={NotFoundPage}/></开关>

);}}

我的问题是:有没有更好的方法来使用 react router v4 检查这些条件?这是检查这些条件的最佳方法吗?这是最佳做法吗?请有人帮我解决这个问题！

解决方案

对于单个路径，您可以采用更简单的方式，

<路由精确路径="/" component={()=>this.props.isUserExist?:<仪表板/>}/>

My react component looks like this:

 class App extends React.Component {  
  render() {
    debugger;
    if(!this.props.isUserExist) {
      return (
        <div>
          <Route exact path="/" component={DashboardPage} />
        </div>
      );
    }
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/list" component={ListPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}

My question is: is there a better way to check these conditions with react router v4? is this the best way to check these conditions? Is this the best practice? Please someone help me with this!

解决方案

In a simpler way for individual paths, you can go with,

<Route exact path="/" component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} />

这篇关于有条件的反应路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！