Formateo de URL y Routing en React: una guía para usar React Router

En una aplicación React, el formato de la URL routing juega un papel crucial en la navegación de páginas y la visualización del contenido correspondiente. Para administrar routing en React, podemos usar la biblioteca. Aquí hay una guía básica sobre cómo usar para dar formato a las URL y manejarlas en su aplicación React. React Router React Router routing

 

Instalar React Router

Abra el directorio de su proyecto en la terminal y ejecute el siguiente comando para instalar: React Router npm install react-router-dom

Importe los componentes necesarios desde su componente React. React Router

 

Definir rutas

Use el componente para envolver su aplicación React y establecer un formato de URL base. <BrowserRouter>

Utilice el <Route> componente para definir rutas en su aplicación.

Ejemplo:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

definir Link _

Utilice el componente para crear correos electrónicos de navegación en su aplicación. <Link> link

Ejemplo:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

Parámetros de la ruta de acceso

Utilice el <Route> componente con un path atributo en el formato /users/:id para acceder a los parámetros de ruta.

Dentro del componente definido por <Route>, puede usar useParams() para acceder a los valores de los parámetros de la ruta.

Ejemplo:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

Uso Switch y Redirect

Use el componente para representar solo la primera ruta que coincida con la ruta. <Switch>

Utilice el componente para los usuarios de una ruta especificada a otra. <Redirect> redirect

Ejemplo:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

Estos son algunos conceptos básicos de formato de URL y routing en React usando. Al utilizar, puede crear aplicaciones React flexibles con la capacidad de navegar y mostrar varios contenidos en función de la URL. React Router React Router