Reaccionar ruta de expresión regular del enrutador 4
En este artículo, aprenderemos a agregar la expresión regular a las rutas de react-router. Mientras que crear las rutas con la identificación o la cadena requiere validar la cadena de la que obtenemos la solicitud.
Las expresiones regulares nos permiten validar las cadenas.
Use el react-router V4 para agregar Regex a la ruta
En React.js, podemos crear las diferentes rutas utilizando la biblioteca react-router. Para cada ruta, necesitamos especificar las rutas, y podemos agregar la expresión regular en la ruta si los parámetros que obtenemos en la ruta necesitan ser validados.
En el siguiente ejemplo, hemos creado tres rutas diferentes. En la primera y segunda ruta, agregamos la expresión regular a la ruta.
Además, pasamos el exacto = {falso} como accesorio para deshabilitar la coincidencia exacta para el componente Inicio. Entonces, cuando alguna ruta no coincide, podemos redirigir a los usuarios a la ruta Inicio.
La primera ruta aceptará la cadena que contiene los números y letras, y la segunda solo aceptará números. Si las rutas no coinciden perfectamente, mostrará la página de inicio.
Código de ejemplo:
import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Different components
function Home() {
return <h2>This is Home Page.</h2>;
}
function About() {
return <h2>This is About Page.</h2>;
}
function UserDetails() {
return <h2>This is User Details Page.</h2>;
}
export default function App() {
return (
<>
{/* Router for different paths */}
<Router>
<Switch>
{/* route = /user/id */}
<Route
path="/user/:id(0-9a-f]{8})?"
component={UserDetails}
exact={true}
/>
{/* route = /id */}
<Route path="/:id(\d+)" component={About} exact={true} />
<Route path="/" component={Home} exact={false} />
</Switch>
</Router>
</>
);
}
Producción:
Cuando vayamos a la ruta como user/234edf43, mostrará el componente UserDetails.
Si vamos a la ruta como /1234, mostrará el componente Acerca de.
La ruta como /abcd12 mostrará el componente Inicio ya que cualquier otra ruta no coincide.
Además, los usuarios pueden cambiar las expresiones regulares según los requisitos, y si el usuario encuentra que la expresión regular no funciona correctamente, agregue el signo de interrogación al final de la expresión regular, como hemos agregado en la primera ruta.
