Pasar accesorios al componente del controlador usando React Router

1. Pasar accesorios a otro componente usando React Router
2. Conclusión

El enrutador de reacción realiza la función principal de vincular una página web a la otra. Al crear aplicaciones de varias páginas, aplicamos el enrutador de reacción para vincular las páginas.

El enrutador React, sin embargo, realiza otra función. También puede pasar estado o props{property} de un enlace a otro.

Con este enfoque, podemos usar un enlace para controlar el estado de otro enlace o compartir parte de los elementos de una página a otra sin renderizar todo el contenido de la página anterior.

Pasar accesorios a otro componente usando React Router

Por ejemplo, queremos pasar un accesorio que ajustará la URL del componente de la página 5 desde el componente de la página 4 utilizando React Router.

Crearemos una nueva carpeta de proyecto e instalaremos React Router con npm install react-router y luego enrutaremos DOM con npm install react-router-dom. Luego crearemos una carpeta y la llamaremos páginas, luego crearemos dos componentes, Página4.js y Página5.js.

Luego comenzamos con la codificación del archivo App.js de esta manera:

Fragmento de código- App.js:

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Page4 from './pages/Page4';
import Page5 from './pages/Page5';

function App(props) {
  return (
    <BrowserRouter>
    <Routes>
      <Route exact path="/" element={<Page4/>} />
      <Route exact path="/page4" element={<Page4 />} />
      <Route path="/page5/:type" element={<Page5/>} />
      </Routes>

    </BrowserRouter>
  );
}
export default App;

Aquí vinculamos ambos componentes a App.js y luego hacemos que la página Page5 acepte cualquier tipo de accesorio usando el atributo :type.

Luego, en el archivo Page4.js, ponemos estos códigos.

Fragmento de código- Page4.js:

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

function Page4(props) {
    return (
        <div>
            <h1>Title of Page 4</h1>
            <hr />
            <Link to={{
                pathname: "/page5/parameter-data",
                state: { stateParam: true }
            }}>Move to Next Page</Link>
        </div>
    );
}

export default Page4;

Al vincular Página4 a Página5, también agregamos un estado que actualiza la URL. Por lo general, muestra solo http://localhost:3000/page5, pero ahora debería mostrar esto: http://localhost:3000/page5/parameter-data como hemos agregado desde Page4.

Luego, en Página5, creamos códigos que lo vinculan de nuevo a Página4, así.

Fragmento de código- Page5.js:

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

function Page5(props) {
    const { type } = useParams();
    return (
        <div>
            <h1>Title of Page 5</h1>
            <hr />
            <Link to={"/page4"}>Move to Prev Page</Link>
        </div>
    );
}

export default Page5;

Y también agregamos el const {type} para recibir los accesorios de Page4.

Producción:

Conclusión

Este enfoque puede resultar eficiente cuando queremos agregar una función destacada o accesorios que no queremos perder dentro de un montón de códigos. Por lo tanto, podríamos crear un componente separado para él y vincularlo a la página que queremos al pasar la propiedad o el estado.