Routing in React

First of all we have to create application in React. Please review the article here for the same. Below, I have detailed an article using which we can create React Application with multiple page/component routing.

First of all we have to add packages for route. Route is use to load the component content on specific link. Use the following command in terminal.

npm install react-router-dom

Also, add bootstrap for designing

npm install react-bootstrap bootstrap

Next, we will create three pages named Home, About and Contact. So, we have to add three js files named Home.js, About.js and Contact.js respectively.

Home.js

import React, { Component } from 'react';

export class Home extends Component {
  
  render () {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>This is the Home page.</p>        
      </div>
    );
  }
}

About.js

import React, { Component } from 'react';

export class About extends Component {
  
  render () {
    return (
      <div>
        <h1>About Us!</h1>
        <p>This is the About Us page.</p>        
      </div>
    );
  }
}

Contact.js

import React, { Component } from 'react';

export class Contact extends Component {
  
  render () {
    return (
      <div>
        <h1>Contact Us</h1>
        <p>This is the Contact Us page.</p>        
      </div>
    );
  }
}

Now, we will create a Navigation menu for the pages. Create NavMenu.js and use the below code.

import React, { Component } from 'react';
import { Container, Navbar, Nav} from 'react-bootstrap';

export class NavMenu extends Component {
   
    render() {
        return (
            <header>
                <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
                    <Container>                        
                            <Nav className="navbar-nav flex-grow">                               
                                <Nav.Link href="/">Home</Nav.Link>                               
                                <Nav.Link href="/about">About</Nav.Link>                                
                                <Nav.Link href="/contact">Contact</Nav.Link>                                                          
                            </Nav>                      
                    </Container>
                </Navbar>
            </header>
        );
    }
}

Next, Create a layout which will have the navbar and the content combination

Layout.js

import React, { Component } from 'react';
import { Container } from 'react-bootstrap';
import { NavMenu } from './NavMenu';

export class Layout extends Component {  

  render () {
    return (
      <div>
        <NavMenu />
        <Container>
          {this.props.children}
        </Container>
      </div>
    );
  }
}

Add routes to App.js so the page will navigate on menu link click. Update App.js with the following code. I have created the pages (Home.js, About.js and Contact.js) in the pages folder and the common files (Layout.js and NavMenu.js) in the shared folder. Make sure to give proper path to the files while importing.

import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Layout } from './shared/Layout';
import { Home } from './pages/Home';
import { About } from './pages/About';
import { Contact } from './pages/Contact';

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/contact' component={Contact} />
        </Switch>
      </Layout>
    </Router>

  );
}

export default App;

Lastly import the bootstrap css in the index.js file for designing.

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

Run the project. You will get the below output.