Scribd
Upload
23 views

React-router cheatsheet

Uploaded by

nikolett.szabadoss
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

React-router cheatsheet

Uploaded by

nikolett.szabadoss
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

05/12/2024, 11:56 React-router cheatsheet

Design and Develop


your inbox. Every we

React-router cheatsheet
ads via Carbon

About URL params

https://reactrouter.com/ var Message = React.createClass({


componentDidMount: function () {
// from the path `/inbox/messages/:id`
var id = this.props.params.id
...
Basic

import { default as Router, Route } from 'react-router'

const routes = ( Link


<Route>
<Route path='*' handler={RootView} />
</Route> import { Link } from 'react-router'
)
<!-- make a named route `user` -->
Router.run(routes, Router.HashLocation, (Root) => { <Link to='user' params={{userId: 10}} />
React.render(<Root />, document.getElementById('all'))
}) <Link to='login'
activeClassName='-active'
onClick='...'>

Nesting

const routes = ( Other config


<Route handler={Chrome}>
<Route path='about' handler={About} />
<Route path='inbox' handler={Inbox} /> <Route path='/'>
<Route path='messages/:id' handler={Message} /> <DefaultRoute handler={Home} />
</Route> <NotFoundRoute handler={NotFound} />
)
<Redirect from='login' to='sessions/new' />
import { RouteHandler } from 'react-router' <Redirect from='login' to='sessions/new' params={{from: 'home'}} />
<Redirect from='profile/:id' to='about-user' />
const Chrome = React.createClass({
render () { <Route name='about-user' ... />
return (
<div>
<h1>App</h1>
<RouteHandler />
</div> Router.create
)
}
}) var router = Router.create({
routes: <Route>...</Route>,
location: Router.HistoryLocation
})

router.run((Root) => { ... })

https://devhints.io/react-router 1/2
05/12/2024, 11:56 React-router cheatsheet

Navigation

import { Navigation } from 'react-router'

React.createClass({
mixins: [ Navigation ], ...
})

this
.transitionTo('user', {id: 10})
.transitionTo('/path')
.transitionTo('http://...')
.replaceWith('about')
.makePath('about') // return URL
.makeHref('about') // return URL
.goBack()

https://devhints.io/react-router 2/2

You might also like