275 lines
7.7 KiB
HTML
275 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang='en' class='no-js '>
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta charset='utf-8'>
|
|
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
|
<link href='./assets/favicon.png' rel='shortcut icon'>
|
|
<meta content='/react-router.html' name='app:pageurl'>
|
|
|
|
|
|
<title>React-router cheatsheet</title>
|
|
<meta content='React-router cheatsheet' property='og:title'>
|
|
<meta content='React-router cheatsheet' property='twitter:title'>
|
|
<meta content='article' property='og:type'>
|
|
|
|
|
|
|
|
<meta content='https://assets.devhints.io/previews/react-router.jpg?t=20200622151222' property='og:image'>
|
|
<meta content='https://assets.devhints.io/previews/react-router.jpg?t=20200622151222' property='twitter:image'>
|
|
<meta content='900' property='og:image:width'>
|
|
<meta content='471' property='og:image:height'>
|
|
|
|
|
|
|
|
<meta content="The one-page guide to React-router: usage, examples, links, snippets, and more." name="description">
|
|
<meta content="The one-page guide to React-router: usage, examples, links, snippets, and more." property="og:description">
|
|
<meta content="The one-page guide to React-router: usage, examples, links, snippets, and more." property="twitter:description">
|
|
|
|
|
|
<link rel="canonical" href="https://devhints.io/react-router">
|
|
<meta name="og:url" content="https://devhints.io/react-router">
|
|
|
|
|
|
|
|
|
|
|
|
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta content='React' property='article:section'>
|
|
|
|
|
|
|
|
|
|
|
|
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
|
<script>
|
|
|
|
window.dataLayer=window.dataLayer||[];
|
|
function gtag(){dataLayer.push(arguments)};
|
|
gtag('js',new Date());
|
|
gtag('config','UA-106902774-1');
|
|
</script>
|
|
|
|
|
|
|
|
<meta property='page:depth' content='1'>
|
|
|
|
|
|
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
|
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
|
|
|
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
|
|
|
|
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
|
|
|
<style>html{opacity:0}</style>
|
|
<link rel="stylesheet" href="./assets/2015/style.css?t=20200622151222">
|
|
<link href="./assets/style.css?t=20200622151222" rel="stylesheet" />
|
|
<link href="./assets/print.css?t=20200622151222" rel="stylesheet" media="print" />
|
|
</head>
|
|
<body>
|
|
<div class='all'>
|
|
|
|
<div class='site-header'>
|
|
<div class='container'>
|
|
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class='post-list -single -cheatsheet'>
|
|
<div class='post-item'>
|
|
|
|
<ul class="social-list -collapse">
|
|
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/react-router.html" target="share"><span class="text"></span></a></li>
|
|
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20React-router.%20https://devhints.io/react-router.html" target="share"><span class="text"></span></a></li>
|
|
|
|
</ul>
|
|
|
|
|
|
<div class='post-headline -cheatsheet'>
|
|
<p class='prelude'><span></span></p>
|
|
<h1><span>React-router</span></h1>
|
|
</div>
|
|
|
|
|
|
|
|
<div class='post-content -cheatsheet'>
|
|
|
|
<h3 id="basic">Basic</h3>
|
|
|
|
<pre><code class="language-js">import { default as Router, Route } from 'react-router'
|
|
|
|
const routes = (
|
|
<Route>
|
|
<Route path='*' handler={RootView} />
|
|
</Route>
|
|
)
|
|
|
|
Router.run(routes, Router.HashLocation, (Root) => {
|
|
React.render(<Root />, document.getElementById('all'))
|
|
})
|
|
</code></pre>
|
|
|
|
<h3 id="nesting">Nesting</h3>
|
|
|
|
<pre><code class="language-js">const routes = (
|
|
<Route handler={Chrome}>
|
|
<Route path='about' handler={About} />
|
|
<Route path='inbox' handler={Inbox} />
|
|
<Route path='messages/:id' handler={Message} />
|
|
</Route>
|
|
)
|
|
|
|
import { RouteHandler } from 'react-router'
|
|
|
|
const Chrome = React.createClass({
|
|
render () {
|
|
return (
|
|
<div>
|
|
<h1>App</h1>
|
|
<RouteHandler />
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
</code></pre>
|
|
|
|
<h3 id="url-params">URL params</h3>
|
|
|
|
<pre><code class="language-js">var Message = React.createClass({
|
|
componentDidMount: function () {
|
|
// from the path `/inbox/messages/:id`
|
|
var id = this.props.params.id
|
|
...
|
|
</code></pre>
|
|
|
|
<h3 id="link">Link</h3>
|
|
|
|
<pre><code class="language-js">import { Link } from 'react-router'
|
|
|
|
<!-- make a named route `user` -->
|
|
<Link to='user' params={{userId: 10}} />
|
|
|
|
<Link to='login'
|
|
activeClassName='-active'
|
|
onClick='...'>
|
|
|
|
</code></pre>
|
|
|
|
<h3 id="other-config">Other config</h3>
|
|
|
|
<pre><code class="language-js"><Route path='/'>
|
|
<DefaultRoute handler={Home} />
|
|
<NotFoundRoute handler={NotFound} />
|
|
|
|
<Redirect from='login' to='sessions/new' />
|
|
<Redirect from='login' to='sessions/new' params={{from: 'home'}} />
|
|
<Redirect from='profile/:id' to='about-user' />
|
|
|
|
<Route name='about-user' ... />
|
|
</code></pre>
|
|
|
|
<h3 id="routercreate">Router.create</h3>
|
|
|
|
<pre><code class="language-js">var router = Router.create({
|
|
routes: <Route>...</Route>,
|
|
location: Router.HistoryLocation
|
|
})
|
|
|
|
router.run((Root) => { ... })
|
|
</code></pre>
|
|
|
|
<h3 id="navigation">Navigation</h3>
|
|
|
|
<pre><code class="language-js">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()
|
|
</code></pre>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="social-list ">
|
|
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/react-router.html" target="share"><span class="text"></span></a></li>
|
|
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20React-router.%20https://devhints.io/react-router.html" target="share"><span class="text"></span></a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-the-site">
|
|
<div class="container">
|
|
<p class='blurb'>
|
|
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
|
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
|
<i class='fleuron'></i>
|
|
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
|
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
|
</p>
|
|
|
|
|
|
<p class='back'>
|
|
<a class='big-button -back -slim' href='.#toc'></a>
|
|
</p>
|
|
|
|
|
|
<p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
|
<script>hljs.initHighlightingOnLoad()</script>
|
|
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
|
|
|
</body>
|
|
</html>
|
|
|