How to create React Page Navigation in React Js

In this demo you will be shown how to create a navigation bar using React JS.

If you don't have a React project created, before you continue you can go to https://wecode101.com/create-react-app in order to understand how.

Create a components directory within the src directory and add the file NavOne.component.js, NavTwo.component.js and NavThree.component.js within the components directory.

In order to view the 3 created components, edit App.js within the src directory.

The 3 components are imported, along with CSS Bootstrap for styling to App.js which is the App Component. The App Component is the main component in React which acts as a container for all other components.

Also imported is the react-router-dom which uses BrowserRouter, Router and Link. The BrowserRouter is used for doing client-side routing with URL segments. It's the component that does all the logic of displaying various components that you provide it with. The Router enables the navigation among views of various components and the Link is used to add clickable links to be mapped to the Router.

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import TabOne from "./components/TabOne.component";
import TabTwo from "./components/TabTwo.component";
import TabThree from "./components/TabThree.component";

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
        <Router>
          <div className="container">
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
              <a className="navbar-brand" href="https://wecode101.com/" rel="noopener noreferrer" target="_blank">
                <img src={logo} width="30" height="30" alt="wecode101.com/" />
              </a>
              <Link to="/" className="navbar-brand">Home</Link> {/*Clickable links related to the Router*/}
              <div className="collpase navbar-collapse">
                <ul className="navbar-nav mr-auto">
                  <li className="navbar-item">
                    <Link to="/" className="nav-link">tab-one</Link>
                  </li>
                  <li className="navbar-item">
                    <Link to="/two" className="nav-link">tab-two</Link>
                  </li>
                  <li className="navbar-item">
                    <Link to="/three" className="nav-link">tab-three</Link>
                  </li>
                </ul>
              </div>
            </nav>
            <br/>
            <Route path="/" exact component={TabOne} />{/*The Router enables the navigation among views of various components*/}
            <Route path="/two" component={TabTwo} />
            <Route path="/three" component={TabThree} />
          </div>
        </Router>
    );
  }
}

Here is an example of one of the 3 components. All the components are similar with a simple display to show the current component on display.

export default App

import React, { Component } from 'react';

export default class TabOne extends Component {

 render() {

   return (

     <div style={{marginTop: 10}}>

       <h3>Tab One>

     </div>

    )

  }

}

You can go here https://github.com/wecode101/react_nav_bar to see the full project.