Scribd
Upload
39 views

React-router cheatsheet

Uploaded by

nikolett.szabadoss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

React-router cheatsheet

Uploaded by

nikolett.szabadoss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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