Client side routing in React application

Client side routing is very important concept to create a smooth user experience in single page application (SPA). It also helps us to manage code easily.

Although it is the most common react library for client side routing, but it is not the only one. The other libraries for client side routing are wouter, Hookrouter and Turbolinks among few others.

First create a react-route-dom library using this command

npm i react-route-dom

Let’s create a which has Home page, Contact, Resource and About. Here is a simple code Home, Contact and About page in respective files. For simplicity, the code is very simple, just demonstrate the loading of appropriate component.

Here is a code in home.js file

const Home = () => {
    return(
        <div>Home</div>
    )
}

export default Home;

Here is a code for About component in about.js file

const About = () => {
    return(
        <div>About</div>
    )
}

export default About;

And Contact component is very similar to others, here is its code in contact.js file

const Contact = () => {
    return(
        <div>Contact</div>
    )
}

export default Contact;

Now let’s create another component for Page Not found. We will sue this when user gave the invalid path. Here is a code for this very similar to other components.

const NotFound = () => {
    return(
        <div>Paage Not Found</div>
    )
}

export default NotFound;

Now let’s include the BrowserRouter component in the index.js file and load the App component inside the BrowserRouter. Here is a complete code of index.js file.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Now let’s pass a parameter when routing to one component. Let’s create a resource component, which accept category as a component and display that category in the component. Here is a code for Resource component with category as a parameter.

import { useParams } from "react-router-dom"

const Resource = () => {

    const { category } = useParams();

    return(
        <div>Resource: Category = {category}</div>
    )
}

export default Resource;

Value of parameter can be get by useParams().

Now let’s call all of these components from App component. First import all the component in App.js file then define all the Route inside the Routes component. Here is a complete code for it.

import {Routes, Route} from 'react-router-dom'
import Home from './Home';
import Contact from './Contact';
import Resource from './Resource';
import About from './About';
import NotFound from './NotFound';

const App = () => {
    return(
        <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/about' element={<About />} />
            <Route path='/resource/:category' element={<Resource />} />
            <Route path='*' element={<NotFound />} />
        </Routes>
    )
}

export default App;

The two important concepts here are parameter is passed using : and parameter name and use * for all the path not defined.

Now when we run the application with localhost:3000/ it displays the home page, localhost:3000/contact displays the contact page localhost:3000/about displays the about page localhost:3000/resource/blogs display resource page with blogs as a category any other path define the Page not found component.