Routing in React

Routing in React:

Prerequisites:

npm install --save react-router react-router-dom

Code

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch, NavLink, Redirect} from 'react-router-dom';
import Home from './containers/Home/Home.js';
import C404 from './containers/C404/C404.js';
import Blog from './containers/Blog/Blog.js';
import Contact from './containers/Contact/Contact.js';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
        <NavLink activeClassName="active" activeStyle={{color: 'red'}} to="/" exact>Home</NavLink>
        <NavLink to="/blog">Blog</NavLink>
        <NavLink to="/contact">Contact</NavLink>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/blog" component={Blog} />
          <Route path="/contact" exact component={Contact} />
          <Route path="/something" exact render={()=> <h1>return jsx</h1>} />
          <Route path="/404" exact component={C404} />
          <Redirect to="/404"/>
        </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;
  • BrowserRouter: in order to use the routing in react you should wrap your components in BrowserRouter containers (or HashRouter for static file servers) to have access to a specialized history object.
  • Link: to create a link.
  • NavLink: create a link that add active class or active style if the link matches the url pattern.
  • Switch: create a group of links but it return only the first matched route.
  • Route: show component if the url matches the path pattern.
  • Redirect: create a redirection to path specified in the "to" attribute.
import React from 'react';
const home = (props) =>{
    return (
        <div>I'm in Home component</div>
    )
}
export default home;
import React from 'react';
const Contact = (props) =>{
    return (
        <div>I'm in Contact component</div>
    )
}
export default Contact;
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import BlogList from '../../components/BlogList/BlogList';
import BlogPost from '../../components/BlogPost/BlogPost';
const Blog = (props) =>{
    return (
        <Switch>
          <Route path="/blog" exact component={BlogList} />
          <Route path="/blog/:id" exact render={BlogPost} />
          <Redirect to="/404"/>
        </Switch>
    )
}
export default Blog;
import React from 'react';
import {Link} from 'react-router-dom';
const BlogList = (props) =>{
    return (
        <div>
            <Link to="/blog/1">Post 1</Link>
            <Link to="/blog/2">Post 2</Link>
        </div>
    )
}
export default BlogList;
import React from 'react';
const BlogPost = (props) =>{
    return (
        <div>Post id: {props.match.params.id}</div>
    )
}
export default BlogPost;
import React from 'react';
const C404 = (props) =>{
    return (
        <div>I'm in 404 component</div>
    )
}
export default C404;

Tips:

Url with params

<Route path="/path/:name" exact render={BlogPost} />

Get url params

props.match.params.name

Navigate programmatically

this.props.history.push({pathname: '/link'})

Redirect conditionally

{(cond)?
	<Redirect to="/">
	:null
}

Create guard to protect your routes

{(cond)?
	<Route path="/blog" exact component={BlogList} />
	:null
}

Relative path

this.props.match.url + "path"