Saltar al contenido
Consejos

Pros y contras de la ruta del lado del cliente con la reacción

Reacciona rindiendo la información apropiada sobre el DOM usando su estructura de componentes. El enrutamiento del lado del cliente en React ayuda a mantener la experiencia de usuario sin problemas que promete una aplicación típica de una sola página. Esto se logra a través de una biblioteca externa de React llamada React Router.

React Router

El enrutador de Reacción utiliza un enrutamiento dinámico para garantizar que el enrutamiento se realice tal como lo solicita el usuario. Esto también significa que todos los componentes requeridos también se renderizan sin flashes de pantalla blanca o recarga de página.

Pros y contras de la ruta del lado del cliente con la reacción
Pros y contras de la ruta del lado del cliente con la reacción

Establecimiento

Asegúrate de que tienes Nodejs y npm instalados en tu máquina (al menos la versión 8 o superior) junto con un editor de código y un navegador web (preferiblemente Chrome o Firefox).

Crear un nuevo proyecto usando create-react-app:

1npx create-react-app react-routing

Shell

Limpiar la plantilla del proyecto eliminando logo.svg, todas sus importaciones relevantes, y algo de calderilla dentro de App.js. Tu App.js debería verse así:

1234567891011importReactfrom$0027react$0027;functionApp(){return(<divclassName="App"</div>);}exportdefaultApp;

jsx

Instale el paquete react-router-dom usando el siguiente comando dentro del directorio raíz:

1npm instalar react-router-dom

Estilos

Ponga los siguientes estilos dentro de index.css:

1234567891011121314151617181920212223242526272829303132333435body{margin:0;font-family: -sistema de manzana, BlinkMacSystemFont,$0027Segoe UI$0027,$0027Roboto$0027,$0027Oxygen$0027,$0027Ubuntu$0027,$0027Cantarell$0027,$0027Fira Sans$0027,$0027Droid Sans$0027,$0027Helvetica Neue$0027, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}. App{max-ancho:400px;margen:30px auto;text-align: center;}nav{padding:5px;background:rgb(151,150,150);color:#ffffff;}nav ul{padding:0;}nav ul li{display: inline-block;margin:010px;cursor: puntero;padding:5px;font-weight:600;}. nav-link{color:#ffffff;text-decoration: none;}

css

Creación de los componentes de la interfaz de usuario

Todos los componentes de la interfaz de usuario harán que

indicando qué componente se está emitiendo actualmente por esa ruta.

Simplemente importa React desde el núcleo, crea un componente funcional apátrida y asegúrate de exportarlo al final. Así es como debería verse About.js:

1234567891011importReactfrom$0027react$0027;constAbout=()=importReactfrom$0027react$0027;constAbout=()=importReactfrom$0027react$0027;constAbout=()=

jsx

De manera similar, Contact.js se verá así:


1234567891011importReactfrom$0027react$0027;constContact=()=importReactfrom$0027react$0027;constContact=()=importReactfrom$0027react$0027;constContact=()=

jsx

Finalmente, puedes crear el componente de Hogar de la misma manera:


1234567891011importReactfrom$0027react$0027;constHome=()=importReactfrom$0027react$0027;constHome=()=

jsx

El módulo de enrutamiento

Los tres componentes importantes del módulo de enrutamiento son , , y .

Todo lo que hay dentro indica información sobre el enrutamiento. Es un componente de envoltura para todos los componentes que usarán el enrutamiento del lado del cliente para renderizarse, e informa a React sobre eso.

asegura que sólo se maneje una ruta a la vez, y el componente nos dice qué componente se rendirá en cada ruta.

Para una aplicación grande, es más lógico crear un componente separado, pero por ahora, es conveniente poner todas las rutas dentro de App.js.


1234567891011121314151617181920212223importarReacción de $0027reaccionar$0027;importarNavbarde$0027./Componentes/Navbar$0027;importar{BrowserRouter,Switch,Route}de$0027reaccionar-router-dom$0027;importarHomefrom$0027./Componentes/Home$0027;importarContactofrom$0027./Componentes/Contactos$0027;importarAboutfrom$0027. /Componentes/Sobre$0027;functionApp(){return(<divclassName="App"><BrowserRouter Routeexactpath="/contacto "component={Contacto};};/Ruta=;}Route="/Acerca de "component={Acerca de

jsx

La etiqueta lleva dos accesorios. Uno es la ruta, que simplemente toma una cuerda que indica la ruta de ese componente y un componente de puntal que da salida a ese componente o lo renderiza cuando el usuario va a esa ruta en particular. La propiedad exacta asegura que el componente se renderice sólo cuando la ruta coincide con la cadena exacta mencionada en el camino y ninguna subcadena o supercadena de esa ruta podrá renderizar ese componente.

El componente Navbar

Por último, para asegurarse de que estas rutas se activan desde la interfaz de usuario, establecer estas rutas dentro de Navbar.js . En lugar de la tradicional etiqueta de ancla (), react-router-dom nos proporciona la etiqueta, que funciona exactamente igual que la etiqueta de ancla pero evita la acción de recarga de la página por defecto.


1234567891011121314151617importReactfrom$0027react$0027;import{Link}from$0027react-router-dom$0027;constNavbar=()=[;{return(<nav <ul>li><Linkto="/"className="nav-link"``Home</Link li><Linkto="/sobre "className="nav-link"`;Acerca de</Link;³³³³³"/li>li;~ Linkto="/contacto "className="nav-link"³³³"Contacto</Link

jsx