ReactJs - can set url or querystring based on state of component tree

Question

I have a component that has several nested components, especially tabs, pills, etc. All of them are not visible even once.

I want to be able to set default state / details based on URL (or URL) parameters, but I don’t understand how to do this in React.

For example, I have a component with two tabs (bootstrap). When the user selects the second tab, I can change the URL with the parameter to refresh the page, the state of the currently selected tab is saved.

I have enabled Router but cannot find simple examples of what I am trying to achieve.

What I would like to do is access / parse the parameters of the query string and set the state and, ultimately, the properties of the child components.

Any advice is really welcome.

I can give an example of a tab component, but I don’t think it will add any value to the question.

Answer 1

How I did it to take advantage of React context s. This is an undocumented but powerful feature that acts as a mutable attribute that a component and all of its children can access.

I suggest Google about this. It's a little tricky to wrap around, but it starts to make sense as soon as you play with it. Here is an example excerpt from some code I'm working on now:

 var React = require('react'); var Router = require('react-router'), Route = Router.Route, RouteHandler = Router.RouteHandler; var ReactBootstrap = require('react-bootstrap'), DropdownButton = ReactBootstrap.DropdownButton, Nav = ReactBootstrap.Nav, Navbar = ReactBootstrap.Navbar; var ReactRouterBootstrap = require('react-router-bootstrap'), MenuItemLink = ReactRouterBootstrap.MenuItemLink; var Nav = React.createClass({ render: function() { return ( <Navbar brand='My Cool Page!' inverse toggleNavKey={0}> <Nav right eventKey={0}> {} <DropdownButton eventKey={2} title='Projects'> <MenuItemLink eventKey="1" to="myCoolPage" params={{ awesomeName: "matt" }}>Go to My Cool Page!</MenuItemLink> </DropdownButton> </Nav> </Navbar> ); } ); var MyCoolPage = React.createClass({ contextTypes: { router: React.PropTypes.func }, getInitialState: function() { return { awesomeName: '' }; }, componentWillMount: function() { // Called once before the first render this.getAwesomeName(); }, componentWillReceiveProps: function(nextProps) { // Called when props change after the first render // From my testing, this is also called when a context changes this.getAwesomeName(); }, getAwesomeName: function() { var { router } = this.context; var awesomeName = router.getCurrentParams().awesomeName; this.setState({awesomeName: awesomeName}); }, render: function() { return ( <h1>My awesome name is: {this.state.awesomeName}</h1> ); } }); var App = React.createClass({ render: function() { return ( <div> <Nav /> <RouteHandler {...props} /> </div> ); } }); var routes = ( <Route handler={App}> <Route name="myCoolPage" path="myCoolPage/:awesomeName" handler={MyCoolPage} /> </Route> ); Router.run(routes, Router.HashLocation, function (Root) { React.render(<Root/>, document.body); });