Workshop 21: React Router
5 likes3,566 views
The document provides an introduction to React Router, focusing on client-side navigation concepts inspired by Ember.js. It covers routing basics, including rendering components and managing routes, as well as dynamic routing and navigation links within React components. The document also includes examples and references for more advanced usage and complementary tools.
Workshop 21: React Router
- 1. Front End Workshops React Router Mario García Martín [email protected]
- 2. React Router Client side navigation
- 3. Introduction Inspired by Ember.js router React-router React History How does a router work? *See alternative data management libraries at https://github.com/facebook/react/wiki/Complementary-Tools#model-management *See alternative routing libraries at https://github.com/facebook/react/wiki/Complementary-Tools#routing
- 4. Histories A history knows how to listen to the browser’s address bar for changes Different flavors are available... ...but you can build your custom history (if you dare)! http://example.com/some/path http://example.com/#/some/path browserHistory createMemoryHistory hashHistory
- 5. Routing basics (1 of 2) ReactDOM.render( <App />, document.querySelector('.container') ); From... to... ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={App} /> </Router>, document.querySelector('.container') ); ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route path="*" component={NotFound} /> </Router>, document.querySelector('.container') ); A more practical example...
- 6. Routing basics (2 of 2) Same example using the routes prop... import routes from './routes'; ReactDOM.render( <Router history={browserHistory} routes={routes} />, document.querySelector('.container') ); // routes.js export default ( <Route path="/" component={App} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route path="*" component={NotFound} /> ); A more scalable way of specifying the routes *For more advanced usage, see https://github.com/reactjs/react-router/blob/master/docs/guides/DynamicRouting.md
- 7. Route nesting ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Home} /> <Redirect from="home" to="/" /> <Route path="contact" component={Contact} /> <Route path="*" component={NotFound} /> </Route> </Router>, document.querySelector('.container') ); / App Home Don’t forget to render the children components inside their parent! /home App Home /contact App Contact /random App NotFound {this.props.children}
- 8. Dynamic routing In the component you can use this.props.params.<param_name> In the route you can define dynamic segments In the component you can use this.props.params.<param_name> Define an optional param by wrapping it between parenthesis <Route path="/users/:userId" component={UserItem} /> <Route path="/contact(/:mode)" component={Contact} />
- 9. Navigation links Link <Link to="/contact">Contact us</Link> In the component you can use this.props.location.query.<param_name> Query params <Link to={"/users/" + user.id} activeStyle={{ color: red }}>User details</Link> <Link to={"/users/" + user.id} activeClassName="active">User details</Link> IndexLink <IndexLink to="/">Contact us</IndexLink> <Link to={{ pathname: "/user/bob", query: { showAge: true } }}>Bob</Link>
- 10. Navigation within components The router instance can be made accessible through the contextTypes class CoolButton extends Component { static contextTypes = { router: PropTypes.object }; onButtonClick() { this.context.router.push('/cool'); } render() { return <button onClick={this.onButtonClick.bind(this)}>Navigate</button>; } } Invoke router push(‘<target_url>’) or replace(‘<target_url>’) methods to navigate programmatically Not the recommended way since react-router 2.4.0* *See https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#changes-to-thiscontext
- 11. Thanks for your time! Do you have any questions?