My Docs
BlogGithubLinkedin
Cheat Sheets
Cheat Sheets
  • πŸ“‹Cheat Sheets
    • Files
    • Terminal Cheat Sheet
    • Flexbox Cheat Sheet
    • Common HTTP status codes Cheat Sheet
    • networking_cheatsheet
    • Regular Expressions Cheat Sheet
    • REGEX units Cheat Sheet
  • bash_cheatsheet
  • Google dork cheatsheet
  • Cheatsheet-v2
  • πŸ•ΈοΈπŸ’» πŸ’» Javascript
    • JavaScript
      • Javascript Python cheatsheet
      • General
        • JavaScript Promise API Cheat Sheet
        • Chai.js
        • Canvas
        • ES6 EXPORTS
        • Asynchronous JavaScript Cheat Sheet
      • React
        • React Cheat Sheet
          • React Component Guide
        • React Patterns:
        • react-examples
        • React.js
          • Bootstrap
        • React.js cheatsheet 2
        • React-router
        • React.js (v0.14)
        • React.js
        • React Patterns:
      • βš–οΈLibraries & Frameworks
        • LOADASH Cheat Sheet
        • sequelize_cheatsheet
        • Sequelize Cheatsheet
      • Node & Express
        • ExpressJS Cheat Sheet
      • CHEATSHEET
      • NPM Cheat Sheet
        • NPM Command Line Cheat Sheet
      • Function Context Cheatsheet
      • js-model
  • πŸ’»CS-Concepts
    • Computer Science Concepts
      • Data Structures
        • The Queue data structure
        • Cheat Sheet for Beginners: JavaScript Data Structures Methods
        • MDN Web Docs Glossary: Definitions of Web-related terms \| MDN
        • Data Structures Cheat Sheet
        • The Tree data structure
        • An Executable Data Structures Cheat Sheet for Interviews
      • networking_cheatsheet
  • Tools
    • πŸ› οΈTools
      • VSCODE Cheat Sheet
      • Emmet
  • πŸ“ΌGuides-Tutorials
    • Tutorials
      • React.js
  • JavaScript Arrays
  • editorconfig
  • AWS CLI
  • ES6 EXPORTS
  • Flynn
  • Github
    • Github
      • Github Cheat Sheet
    • git log
    • GITHUB Cheat Sheet
      • An Executable Data Structures Cheat Sheet for Interviews
      • graphs_cheatsheet
  • General
    • General
  • πŸ‘¨β€πŸ’»πŸ‘¨πŸ’» πŸ‘¨πŸ’» πŸ’» Programming Languages
    • 🐍Python:
      • Python
        • What is Python
      • Regex In Python
    • HTML
  • EC2 API tools
    • MARKDOWN
    • πŸ§˜β™‚ PSQL
      • POSTGRES
      • postgreSQL_cheatsheet
  • ES6 IMPORTS
    • bash_cheatsheet
    • cleancode
    • πŸ”¨Bash
      • Bash Cheat Sheet
      • Learn Bash Scripting: Bash Scripting Cheatsheet
      • Curl
      • Bash Shortcuts Cheat Sheet
      • SSH Cheatsheet
      • Linux
    • CSS
      • CSS
        • CSS Grid
        • cssnext
        • CSS Cheat Sheet
        • CSS Flex Box
        • CSS tricks
        • CSS selectors
        • cssnext
        • CSS background
        • CSS animations
    • Typescript
  • Computer Science Concepts
    • An Executable Data Structures Cheat Sheet for Interviews
    • graphs_cheatsheet
    • networking_cheatsheet
    • Firebase
    • networking_cheatsheet
    • πŸ›Heroku Cheat Sheet
    • Binary Tree
  • πŸ“šDocs
    • Docs
      • editorconfig
      • EC2 API tools
      • Asynchronous JavaScript Cheat Sheet
      • CHEATSHEET (3)
      • js-model
      • Emmet
      • Binary Tree
      • Python
      • Contributor Covenant Code of Conduct
      • networking_cheatsheet
      • Common HTTP status codes Cheat Sheet
      • AWS CLI
      • Linux
      • networking_cheatsheet
      • React Patterns:
      • MDN Web Docs Glossary: Definitions of Web-related terms \| MDN
      • JavaScript Arrays
      • Linux
      • Javascript Python cheatsheet
      • Cheatsheet-v2
      • Binary Tree
      • Heroku Cheat Sheet
      • Asynchronous JavaScript Cheat Sheet
      • Cheatsheet Compilation
      • AWS CLI
      • EC2 API tools
      • Common HTTP status codes Cheat Sheet
      • Firebase
      • The Queue data structure
      • Cheat Sheet for Beginners: JavaScript Data Structures Methods
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. πŸ’» πŸ’» Javascript
  2. JavaScript
  3. React

React-router

Basic

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'))
})

Nesting

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>
    )
  }
})

URL params

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

Link

import { Link } from 'react-router'

<!-- make a named route `user` -->
<Link to='user' params={{userId: 10}} />

<Link to='login'
  activeClassName='-active'
  onClick='...'>

Other config

<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' ... />

Router.create

var router = Router.create({
  routes: <Route>...</Route>,
  location: Router.HistoryLocation
})

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

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()
PreviousReact.js cheatsheet 2NextReact.js (v0.14)

Last updated 3 years ago

Was this helpful?

πŸ•ΈοΈ