Условный рендеринг React-router
Можно ли делать условный рендеринг внутри функции render компонента <Route /> React-router? Вид этого:
<Route exact path = "/form" render = {props => (
this.props.dataLoaded && <Form {...props} />
)} />
Идея в том, что ... Я не хочу монтировать компонент Form, пока не загрузятся некоторые данные в родительском компоненте.
У меня есть эти данные в хранилище redux, поэтому в основном я мог получить к ним доступ внутри дочернего компонента. Проблема в том, что мне пришлось бы проверить изменения и внести некоторые дополнительные вещи, чтобы достичь того, что мне нужно.
Условный рендеринг мне кажется гораздо более простым решением. Я просто нигде этого не видел, поэтому не уверен, является ли это технически правильным решением.
С технической точки зрения можно использовать такой подход. Убедитесь, что это нормально с точки зрения пользователя - для этого можно использовать какое-нибудь состояние загрузки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 истинно
Вы можете сделать это таким образом или создать родительский компонент, который управляет логикой и условно отображает <Form>. Затем привяжите родительский компонент к маршруту.