Enrutamiento condicional en React JS

A veces necesitamos remitir al usuario a otra página. Por ejemplo, si su usuario llenó un formulario con información no válida, puede transferir al usuario a otra página que notifique al usuario sobre sus datos no válidos.

En React JS, se conoce como enrutamiento. Se utiliza principalmente para referir a los usuarios a otra ubicación.

Existe un enrutamiento conocido como enrutamiento condicional, que principalmente transfiere a los usuarios a otra página en función de condiciones específicas.

Este artículo mostrará cómo podemos configurar el enrutamiento condicional en nuestra aplicación web. Además, veremos ejemplos y explicaciones necesarias para facilitar el tema.

Aplicar enrutamiento condicional en una aplicación web

En nuestro ejemplo a continuación, ilustraremos cómo podemos configurar el enrutamiento condicional en una aplicación web. Echa un vistazo a los siguientes códigos.

Código de ejemplo- 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>
   )
   }
}

También hay una versión más corta del código anterior, que se muestra a continuación:

Código de ejemplo- 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>
    )
}

En nuestro ejemplo anterior, aplicamos la condición en línea en la línea:

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

Además, ya comandamos el propósito de cada bloque de código. Ahora echemos un vistazo al archivo index.js, que tiene el siguiente aspecto:

Código de ejemplo- 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();

Ahora, una vez que haya terminado con todos los archivos, obtendrá el siguiente resultado en su navegador:

Este tutorial utiliza el paquete react-select, por lo que debe instalar este paquete antes de ejecutar la aplicación. Puede instalar esto fácilmente usando npm.

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Y para ejecutar un proyecto React, su sistema debe contener la última versión de Node JS.

Si su sistema no contiene Node JS, instálelo primero.