React-router conditional rendering

Question

Is it alright to make conditional rendering inside of render function of <Route /> component of React-router? Kind of this:

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

The idea is ... I dont want to mount the Form component until some data in parent component are loaded.

I have that data in redux store, so basically I could access it inside of the child component. The problem is that I would have to check the changes and make some additional stuff in order to achieve what I need.

The conditional rendering seems to me as much simpler solution. I just havent seen it anywhere yet so Im not sure whether it is technically right solution.

You could do it this way or you could create a parent component that controls the logic and conditionally rends <Form>. Then link the parent component to the route. — tnyN
– tnyN, Commented Jul 25, 2018 at 15:50
From a technical point of view, you can use such an approach. Please make sure that it's ok from the user perspective - you could use some loading state for that. — Łukasz Wojciechowski
– Łukasz Wojciechowski, Commented Jul 25, 2018 at 16:59

MBehtemam · Accepted Answer · 2018-07-25 18:06:25Z

1

I have two solutions for you and you can choose. first, you can render some component if data loaded otherwise you can load for example some other like loading component

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

so if dataLoaded is equal to true it renders <Form> otherwise render <Loading>. Another solution is completely rendered router if data loaded:

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

in this scenario <Form> is accessible only if dataLoaded is true

answered Jul 25, 2018 at 18:06

MBehtemam

7,92917 gold badges68 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-router conditional rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related