Conditional Routing in React JS

Sometimes we need to refer the user to another page. For example, if your user filled a form with invalid information, you may transfer the user to another page that notifies the user about his invalid data.

In React JS, it is known as Routing. It is mainly used to refer users to another location.

There is a Routing known as Conditional Routing, which mainly transfers users to another page based on specified conditions.

This article will show how we can set up Conditional Routing in our web application. Also, we will see necessary examples and explanations to make the topic easier.

Apply Conditional Routing in a Web Application

In our below example, we will illustrate how we can set up Conditional Routing in a web application. Take a look at the below codes.

Example Code- App.js:

// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'

export default function App() {
  var Newpage = false;

   // Applying condition
   if (Newpage) {
    return (
       <BrowserRouter>
          <Routes>
            <Route path="*" element={<Router />} />
          </Routes>
       </BrowserRouter>
    )
   } else {
   return (
    <h1>Page not changed</h1>
   )
   }
}

There is also a shorter version of the above code, which is shown below:

Example Code- App.js:

// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'

export default function App() {
    var Newpage = true;
    return (
       <BrowserRouter>
          <Routes>
            <Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />
          </Routes>
       </BrowserRouter>
    )
}

In our above example, we applied the inline condition in the line:

<Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />

Also, we already commanded the purpose of each code block. Now let’s take a look at the index.js file, which looks like the below:

Example Code- index.js:

// importing necessary packages and files
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Now, after you are done with all the files, you will get the output below in your browser:

This tutorial uses the react-select package, so you need to install this package before running the application. You can easily install this by using npm.

The example codes shared in this article are written in React JS project. And to run a React project, your system must contain the latest Node JS version.

If your system doesn’t contain Node JS, install it first.