React router setup- Self Notes Series

In the last series, I manage to setup my development environment with hot reloading capability. I can now proceed with my app development with all the tool provided. One of the main thing I need to start with is the application layout and the navigational aspect of the application.

In developing a single page application, React need to render specific component in the same single page and also update certain part of it when react needs too. React also need to manage different pages to be displayed on a single page. This can be achieved by using React Router. Today I will walk-through the process of setting up Router in a React application.

Step 1

I need to create a simple navigation bar for the homepage I will also be using Zurb Foundation for the styling

#server/index.html
##in the head
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">

Step 2

I will then create a Navbar component for my web navigation.

#client/components/navbar/NavBar.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class NavBar extends Component {
 render() {
  return(
   <div className="top-bar">
     <div className="top-bar-left">
       <ul className=" menu">
         <li className="menu-text"><Link to="/">My Real React App</Link></li>
         
       </ul>
     </div>
     <div className="top-bar-right">
    <Link to="/signin">Signin</Link>
     </div>
    
   </div>
  );
 }
}
export default NavBar;

I need to use Link which is imported from react-router-dom to connect each link in the navbar to their particular route.

Step 3

I need to render the navbar, setup all the routes and create all the pages

#client/components/App.js
##new imports
import { BrowserRouter as Router, Route, Link, browserHistory } from 'react-router-dom';
import NavBar from './navbar/NavBar';
import Home from './Home';
import SignIn from './SignIn';
class App extends Component {
 render() {
  return(
   
   
   <Router history={browserHistory}>
    <div>
     <NavBar />
     <Route exact path="/" component={Home}/>
     <Route path="/signin" component={SignIn}/>
    </div>
   </Router>
   
  );
 }
}
export default App;
#client/components/Home.js
import React, {Component} from 'react';
class Home extends Component {
render() {
  return(
   <div id="home-container">
    <div className="row">
     <div className="small-12 column text-center">
      <h1>Welcome to the home page</h1>
     </div>
    </div>
   </div>
   
  );
 }
}
export default Home;
#client/components/Signin.js
import React,  {Component} from 'react';
class SignIn extends Component {
 render() {
  return(
   <div id="signin-container">
    <div className="row">
     <div className="small-12 column text-center">
      <h1>Please signin here</h1>
     </div>
    </div>
   </div>
   
  );
 }
}
export default SignIn;

Step 4

Finally I need to install react-router. SinceI am building a web application I will use the react-router-dom like above

#terminal
$npm install --save react-router-dom

When I run the server now I am able to navigate from one page to another through the navbar. See you on the next series.

Git resource

notes: There are probably many ways to implement this feature and and this is how I find the easiest way for me to implement this. Anybody is free to give a comment for any mistakes or improvement that I can apply. This guide is initially for my own self to learn and remember about what I have done, nonetheless anybody is welcome to follow this guide if you find it is very helpful.