Build multiple pages web app in react with react-router

What is react-router? React-router helps you create multiple pages in your application as against the concept of react which is a Single page application. How to implement React-router will be implemented in the next paragraphs.

How to install react-router

So you need to run the command in your terminal

npm install react-router-dom

NOTE: this script must be run in your react app file directory.

Setting up the react-router

You have to import some components from the react-router-dom and they are: BrowserRouter, Route, Link,Switch, Redirect their functions will explained. You import this components just like you import your components which is:

import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom'

Explaining the imported components i. BrowserRouter: So you might be asking why BrowserRouter was imported as Router, it's just a way of making it easier and shorter to write. What does Router do? All other components must be wrapped inside the Router component and this is best used in your App.js

const App = () => {
         return (
               <Router>
                     <ComponentOne/>
                     <ComponentTwo/>
              </Router>
         )
    };

ii. Route: they contain take in the path prop and the component to be rendered. NOTE: They are always wrapped within the Router. don't forget that.

<Route path="/" eaxct component={ComponentOne}/>

const App = () => {
         return (
               <Router>
                     <Route path="/" exact component={ComponentOne}/> 
                     <Route path="/componenttwo" component={ComponentTwo}/> 
              </Router>
         )
    };

NOTE: you have to add 'exact' keyword so it could match each path iii. Switch: Switch helps make our routing easier NOTE: at this stage all our Routes are wrapped in the Switch component and the Switch components will be wrapped in the Router.

const App = () => {
         return (
               <Router>
                    <Switch>
                      <Route path="/" exact component={ComponentOne}/> 
                      <Route path="/componenttwo" component={ComponentTwo}/> 
                    </Switch>
              </Router>
         )
    };

iv. Link: Link is works just like the <a> tag in our basic html, it creates a link to access the page that is passed in the 'to' prop.

<Link to='/ComponentTwo'>Go to Component Two page</Link> NOTE: The Link component is commonly used in the Page component

// ComponentOne page

import {Link} from 'react-router-dom'
const ComponentOne = () => {
    return(
        <div>
            Home
            <Link to="/componenttwo">Go to ComponentTwo page</Link>

        </div>
    )
}

v. Redirect: it's mostly used for pages that are not found in the web app so most of the times it has the 404 page and it takes to as a prop also.

<Redirect to="/404"/>

Adding everything together to build multi-page application

Your App.js houses everything just like this:

import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route path="/" exact component={ComponentOne} />
          <Route path="/componenttwo" component={ComponentTwo} />
          <Route path="/404" component={PageNotFound}/>
          <Redirect to="/404"/>
        </Switch>
      </div>
    </Router>
  );
}

Your component one looks like this

import {Link} from 'react-router-dom'
const ComponentOne = () => {
    return(
        <div>
            Home
            <Link to="/componenttwo">Go to ComponentTwo</Link>
        </div>
    )
}

Your component two looks like this

import {Link} from 'react-router-dom'

const About = () => {
    return(
        <div>
            Component Two
            <Link to="/">Go to ComponentOne</Link>
        </div>
    )
}

Your 404 page looks like this

import {Link} from 'react-router-dom'

const PageNotFound = () => {

    return (
      <div>
        Page not found
        <Link to="/">ComponentOne</Link>
        <Link to="/about">ComponentTwo</Link>
      </div>
    );
}

So it's been a long read, you can always use that basic explanation to build more complex multiple pages web app using react-router. Learn more about react router here ! Thanks