React-router条件渲染

Posted 2021-05-05

在React-router的render组件的<Route />函数内部进行条件渲染是否可以？有点这样：

<Route exact path="/form" render={props => (
  this.props.dataLoaded && <Form {...props} />
)} />

这个想法是......我不想挂载Form组件，直到父组件中的某些数据被加载。

我在redux存储中有这些数据，所以基本上我可以在子组件中访问它。问题是我必须检查更改并制作一些额外的东西才能实现我的需要。

在我看来条件渲染是一个更简单的解决方案。我还没有在任何地方看到它所以我不确定它是否在技术上是正确的解决方案。

答案

我有两个解决方案，你可以选择。首先，如果加载了数据，您可以渲染一些组件，否则您可以加载一些其他组件，例如加载组件

<Route exact path="/form" render={props => (
     this.props.dataLoaded === true? <Form {...props} /> : <Loading {...props}/>
)} />

因此，如果dataLoaded等于true，它会使<Form>呈现<Loading>。另一种解决方案是在加载数据时完全呈现路由

{this.props.dataLoaded && <Route exact path="/form" render={props => <Form {...props}/>} /> }

在这种情况下，<Form>只有在dataLoaded为真时才可访问