javascript - React-router条件渲染

Question

可以在 render 内进行条件渲染吗？ <Route />的功能React-router 的组件？类似这样:

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