In this example, We have shared react router modal-only routes. You can also view the resulting example app in its own window so you can see the URLs changing to make sure refreshing works as you’d expect.
Here is a working example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <Router history={newHistory}> <Route path="/" component={App}> <Route path="home" component={Container} > <IndexRedirect to="home"/> <Route path="login" component={Authentication}/> <Route path="home" component={Home}/> <Route path="post/:id" component={Post}/> </Route> </Route> </Router> <Link to='/post/123' state={{isModal:true}}/> <Link to='/home' state={{isModal:false}}/> <Link to='/login' state={{isModal:true}}/> Container = React.createClass({ render() { let isModal = (location.state && location.state.modal); return ( <div id="MeContainer"> <ModalControlOpen isModal={isModal}> <Modal returnTo={this.props.location.pathname}> {this.props.children} </Modal> </ModalControlOpen> <ModalControlClose isModal={isModal}> {this.props.children} </ModalControlClose> </div> ) } }); ModalControlOpen = React.createClass({ render(){ if (this.props.isModal) { return ( this.props.children ) } else return <div></div> } }); ModalControlClose = React.createClass({ shouldComponentUpdate(nextProp){ return !nextProp.isModal }, render(){ return ( this.props.children ) } }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
