反应路由器条件渲染

Question

可以在React-router的render组件的<Route />函数内部进行条件渲染吗？这类：

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

这个主意是...我在挂载父组件中的某些数据之前，不想挂载Form组件。

我在redux存储中存储了这些数据，因此基本上我可以在子组件内部访问它。问题是我必须检查更改并添加一些其他内容才能实现我所需要的。

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

Answer 1

我为您提供两种解决方案，您可以选择。 首先，如果加载了数据，则可以呈现某些组件；否则，可以加载例如加载组件

之类的其他组件。

<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为真时才可访问