有条件的反应路由器[关闭]答案

【问题标题】：React router with conditions [closed]有条件的反应路由器[关闭]
【发布时间】：2018-11-04 17:12:32
【问题描述】：

我的反应组件如下所示：

 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>
    );
  }
}

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

【问题讨论】：

Simple Conditional Routing in Reactjs的可能重复
感谢@johnsam，如果我想将路由发送到不同的组件怎么办。例如，当用户存在和当用户不存在 ?
快乐编码：D
@johnsam，希望你明白这个问题吗？
大雁。在您的示例中，您可以只在您的情况下使用三元条件。 <Route exact path="/" component={this.props.isUserExist ? DashboardPage : HomePage} />。您的案例不在交换机内，并且不会遵循登录用户的未找到页面的后备规则。对于更复杂的场景，请查看下面的答案。

标签： javascript reactjs redux react-router react-redux

【解决方案1】：

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

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

【讨论】：

为什么要这样做？
我的意思是，也可以这样做...条件可以在组件选择之前提供。
@RohithMurali 我试过了，但它显示Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.，但是当作为组件属性传递时组件会被渲染。
@PrivateOmega 你确定你做过component={()=>this.props.isUserExist?<HomePage/> : <Dashboard/>} 而不是component={this.props.isUserExist?<HomePage/> : <Dashboard/>}。因为错误本身说expected a string or a class/function
@PrivateOmega render??

【解决方案2】：

简而言之，React Router 不是为这种场景使用自定义解决方案构建的。它足够轻巧，可以让开发人员决定什么是更好的选择。

说来话长，视情况而定。如果您希望代码必须具有公共路由，而在本示例中没有，则使用内联 Javascript 和运算符 (&&) 可能更易于维护。例如：

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

      </div>
    );
  }
}

在这个例子的范围内，（仪表板只有注销的用户可以访问，未找到的页面只有登录的用户可以访问）您的示例演示了 early return 的概念，这是一个很好的图案。这是一种避免编写else 并指示主要代码路径是什么（用户经过身份验证）和偶尔的代码路径是什么（用户未经身份验证）的方法。阅读更多关于提前返回here的信息。

围绕这个还有其他想法，比如构建自己的自定义PrivateRoute。 here 演示了这个想法的一个例子。

【讨论】：

@dayan 这里的私有路由场景是您的用例的好方法。