Setting up React Router in Your Project (quick beginner version)

React Router is a powerful tool that does not come with the standard npm or npx create-react-app library, even though it is one of the top downloaded libraries.

Start by creating a React Application in your terminal. The name of your app will be between the quotation. Also note that between words there is a dash, and react will not accept capital letters anywhere in the name of a project.

npx create-react-app "my-app"

Now assuming you know the basics of folder structure, you can proceed with creating a few components. You’ll want three files header.js, footer.js, about.js, and service.js.

The example below shows a functional component. All components listed above can be made as a functional component. Futhermore, if you used npx to download and set up your react application, you do not need the import react from react line at the top.

In order to begin with React Router you need to download the React Router library. Type the following code snippet into your terminal.

npm install react-router-dom

Next navigate inside your index.js folder and type the following code:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

Definitions for the elements inside the import’s curly braces:

BrowserRouter: A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Switch: Renders the first child <Route> or <Redirect> that matches the location.

Route: It’s responsible to render some UI when its path matches the current URL.

Paste the following code inside index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Header from './components/header'
import Footer from './components/footer'
import About from './components/about'
import Service from './components/service'

 const Routing = () => {
  return(
    <Router>
      <Header/>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/about" component={About} />
        <Route path="/service" component={Service} />
      </Switch>
      <Footer/>
    </Router>
  )
}
ReactDOM.render(
  <React.StrictMode>
    <Routing />
  </React.StrictMode>,
  document.getElementById('root')
);

All components have been imported at the top of our index.js file. We have created a Routing function to be called in ReactDOM render method near the bottom of the index.js file. Inside Calling the Header and Footer component outside of the Switch tag because both are to be used on each page. All of our components are called inside the Switch tag under Route as a prop component. Inside of our components,path denotes to the path you want to set for the component. The exact prop is used if you have similar route path names here /.

Now For Navigating to our Paths

We will create basic nav links from react-router. Simply Import Link from react-router-dom inside the Header.js file.

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

Inside the Header.js file but under our import statement, we will want to paste the following code:

export default function header() {
    return (
        <>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/service">Service</Link></li>
            </ul>
        </>
    )
}

Now we can run our project by typing npm start in our terminal.

This sums up the beginning of using Routing in your page. I hope you enjoyed this easy tutorial.

\^o^/