React Router Getting started with React Router Hello World with React and React Router

Example

Once you've installed react and react-router, Its time to use both of them together.

The syntax is very simple, you specify the url and the component you want to render when that url is opened

<Route path="hello" component={ HelloComponent } />

This means when the url path is hello, Render the component HelloComponent

---

FILENAME: app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, Link } from 'react-router';

// These are just demo components which render different text.

let DashboardPage = () => (
  <div>
    <h1>Welcome User</h1>
    <p>This is your dashboard and I am an example of a stateless functional component.</p>
    <Link to="/settings">Goto Settings Page</Link>
  </div>
)

let SettingsPage = () => (
  <div>
    <h1>Manage your settings</h1>
    <p>display the settings form fields here...or whatever you want</p>
    <Link to="/">Back to Dashboard Page</Link>
  </div>
)

let AuthLoginPage = () => (
  <div>
    <h1>Login Now</h1>
    <div>
      <form action="">
        <input type="text" name="email" placeholder="email address" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit">Login</button>
      </form>
    </div>
  </div>
)

let AuthLogoutPage = () => (
  <div>
    <h1>You have been successfully logged out.</h1>
    <div style={{ marginTop: 30 }}>
      <Link to="/auth/login">Back to login page</Link>
    </div>
  </div>
)

let ArticlePage = ({ params }) => (
  <h3>Article {params.id}</h3>
)

let PageNotFound = () => (
  <div>
    <h1>The page you're looking for doesn't exist.</h1>
  </div>
)

// Here we pass Router to the render function.
render( (
    <Router history={ browserHistory }>

      <Route path="/" component={ DashboardPage } />
      <Route path="settings" component={ SettingsPage } />

      <Route path="auth">
        <IndexRoute component={ AuthLoginPage } />
        <Route path="login" component={ AuthLoginPage } />
        <Route path="logout" component={ AuthLogoutPage } />
      </Route>
    
      <Route path="articles/:id" component={ ArticlePage } />

      <Route path="*" component={ PageNotFound } />

    </Router>
  ), document.body );

Route Parameters : Router path can be configured to take parameters so that we can read the parameter's value at the component. The path in <Route path="articles/:id" component={ ArticlePage } /> have a /:id. This id variable serves the purpose of path parameter and it can be accessed at the component ArticlePage by using {props.params.id}.

If we visit http://localhost:3000/#/articles/123 then {props.params.id} at component ArticlePage will be resolved to 123. But visiting url http://localhost:3000/#/articles, will not work because there is no id parameter.

The route parameter can be made optional by writing it in between a pair of parenthesis:
<Route path="articles(/:id)" component={ ArticlePage } />

If you want to use sub routes, then you can do

<Route path="path" component={ PathComponent }>
  <Route path="subpath" component={ SubPathComponent } />
</Route>

• when /path is accessed, PathComponent will be rendered
• when /path/subpath is is accessed, PathComponent will be rendered and SubPathComponent will be passed to it as props.children

You can use path="*" to catch all the routes that doesn't exist and render 404 page not found page.