Reaccionar enlace a otra página en React

1. Enlaces en React
2. Use el paquete react-router-dom para redirigir a otra página en React

Los enlaces se pueden encontrar en todo el Internet. Son fundamentales para descubrir recursos como páginas web, fotografías y videos, sin mencionar su importancia en SEO.

El enrutamiento determina qué código debe ejecutarse cuando se visita una URL. Este artículo te enseñará cómo funciona el enrutamiento de React.

Enlaces en React

Como se ilustra a continuación, los enlaces en las aplicaciones ordinarias que no usan una biblioteca como React se crean con una etiqueta de anclaje.

<a href="https://Youtube.com">Go To Youtube</a>

Recuerda que esto también funciona en React. Esta estrategia de enrutamiento desencadena una actualización de página completa cuando lo único que cambia en la nueva ruta puede ser una imagen y algo de texto.

Una actualización de página completa es beneficiosa en algunas situaciones, pero rara vez es necesaria.

Las bibliotecas como React Router usan esto para permitir que su aplicación represente los componentes que deben volver a procesarse según una ruta determinada.

Use el paquete react-router-dom para redirigir a otra página en React

Veamos cómo usar el paquete react-router-dom para redirigir a otra página en ReactJS. El react-router-dom es un paquete de reactJS que le permite construir un enrutamiento dinámico en una página web.

Primero, cree una aplicación de reacción y luego agregue diferentes componentes.

Hemos creado dos páginas, Home.jsx y About.jsx.

Código - Inicio.jsx:

import React from 'react';
import {Link} from 'react-router-dom';

const Home = () => {
  return (<div><h1>Home Page</h1>
      <p>You are in home Page</p><br /><ul>
          <li><Link to = '/'>Home</Link>
        </li><li>
          <Link to = '/about'>About</Link>
        </li></ul>
    </div>);
};
export default Home;

Código - Acerca de.jsx:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is about page</p>
    </div>
  );
};

export default About;

Utilice el paquete react-router-dom para implementar el enrutamiento. Esta sección implementará el paquete react-router-dom en nuestra aplicación React.

Para hacerlo, debemos importar componentes específicos del paquete react-router-dom, incluidos BrowserRouter,, Routes, y Route.

Usaremos el alias BrowserRouter como enrutador para simplificar las cosas. Luego, revisamos cada componente importado uno por uno.

El BrowserRouter mantiene la interfaz de usuario sincronizada con la URL utilizando la API de historial de HTML5. La Ruta es responsable de representar la interfaz de usuario cuando su ruta coincide con la URL actual, y Rutas muestra la primera ruta secundaria o redirecciones correspondientes a la ubicación.

Aquí está el código para el archivo App.js, en el que implementaremos el paquete react-router-dom.

Código - App.js:

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path='/' element={
    <Home />} />

          <Route path="/about' element={<About />} /'
        </Routes>
      </Router>
    </>
  );
}

export default App;

Aunque nos estamos conectando a React, el React Router lo reescribe en secreto para responder, asegurando que nuestras URL actuales continúen funcionando correctamente. También implica que si modifica la configuración de su servidor de modo que ya no se requiera la totalidad, esos enlaces se actualizarán automáticamente.

Cuando haga clic en Acerca de, lo redirigirá a la página Acerca de:

Eso es todo. Sería útil si ahora entendiera la noción de los enlaces React y cómo administrar las rutas de manera eficiente.