Golang React JS Technology Blog

How to create simple React Router to navigate multiple pages?

In this example, we have created multiple page website so when user enter a URL in the address bar and the browser navigates to a corresponding page. And it also navigate to the appropriate application view when the user clicks a link.

First, head over to nodejs.org and install Node if you already don't have it on your machine. Now, open up the Terminal on Mac or Command Prompt on Windows and run the following command to install create-react-app package.

npm install -g create-react-app

Create Your First React App

Now, type the following command to create a new react app:

create-react-app example

Now, go to the project folder:

cd example

Install Dependencies for this Project

npm install --save react-router-dom

The "package.json" will get update and may look like as below (**Don't update manually**)

package.json

Example

{
  "name": "example5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Add the following codes in App.js

src\App.js

Example

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
 
class App extends Component {
  render() {
    return (      
       <BrowserRouter>
        <div>
          <Navigation />
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
            <Route component={Error}/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}
 
export default App;

Our header component contains BrowserRouter, Switch and Route imported from the 'react-router-dom' library which provide the essential routing functionalities. BrowserRouter contains a list of Route components. When the browser's location matches the path, the component will be displayed.

Home Page Content

src\components\Home.js

Example

import React from 'react';
 
const home = () => {
    return (
       <div>
          <h1>Home</h1>
           <p>Home page body content</p>
       </div>
    );
}
 
export default home;

About Us Page Content

src\components\About.js

Example

import React from 'react';
 
const About = () => {
    return (
       <div>
          <h1>About US</h1>
          <p>About US page body content</p>
       </div>
    );
}
 
export default About;

Contact Us Page

src\components\Contact.js

Example

import React from 'react';
 
const Contact = () => {
    return (
       <div>
          <h1>Contact US</h1>
          <p>Contact US page body content</p>
       </div>
    );
}
 
export default Contact;

Error Page

src\components\Error.js

Example

import React from 'react';
 
const Error = () => {
    return (
       <div>
          <p>Error: Page does not exist!</p>
       </div>
    );
}
 
export default Error;

Navigation Menu

src\components\Navigation.js

Example

import React from 'react';
 
import { NavLink } from 'react-router-dom';
 
const Navigation = () => {
    return (
       <div>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/contact">Contact</NavLink>
       </div>
    );
}
 
export default Navigation;

Now launch the application

npm start

This will developed a static website on web server on port 3000 on your machine. This also launch your browser to navigate http://localhost:3000.


Most Helpful This Week
How to perform computation inside expression using ternary operator? React JS Blog CRUD operation onMouseDown and onMouseUp Event handling in ReactJs 3 Different Examples - How State Works in React? How to pass data from child component to its parent in ReactJS? How to handle events using expressions inside JSX?