Solucionat: descarregar react router dom

Inici » JavaScript » React Router » Solucionat: descarregar react router dom

El principal problema relacionat amb la descàrrega de React Router DOM és que pot ser difícil de configurar i configurar. React Router DOM requereix una gran quantitat de configuració i configuració, cosa que pot consumir molt de temps i complexa per als desenvolupadors que són nous a la biblioteca. A més, React Router DOM està en constant evolució, de manera que els desenvolupadors han de mantenir-se al dia amb la darrera versió per garantir la compatibilitat amb les seves aplicacions.

import { BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. "importar { BrowserRouter com a router, ruta } de 'react-router-dom';" – Aquesta línia importa els components BrowserRouter i Route de la biblioteca react-router-dom.

2. “ReactDOM.render(” – Aquesta línia crida al mètode de renderització ReactDOM per representar un element React al DOM del contenidor subministrat i retornar una referència al component (o retorna nul per als components sense estat).

3. "” – Aquesta és una etiqueta d'obertura per a un component d'encaminador que s'utilitzarà per embolicar totes les nostres rutes per tal de proporcionar funcionalitat d'encaminament per a la nostra aplicació.

4. "” – Aquesta és una etiqueta d'obertura per a un component de ruta que s'utilitzarà per definir una ruta única dins de la nostra aplicació que coincidirà amb les sol·licituds fetes a '/'.

5. "” – Aquesta és una etiqueta de tancament automàtic que representa un component d'aplicació al nostre arbre DOM quan aquesta ruta coincideix amb el dom del router de reacció.
El component de l'aplicació pot ser qualsevol component de React que hàgim definit en un altre lloc de la nostra base de codi o importat d'una altra biblioteca o paquet, com ara Material UI o Bootstrap, etc.

6. “” – Aquesta és una etiqueta de tancament per al component de ruta que es va obrir a la línia 4 anterior, tanca aquesta definició de ruta en particular perquè es puguin afegir altres rutes si cal més endavant a la nostra base de codi sense afectar la funcionalitat o el comportament d'aquesta. .

7. “” – Aquesta és una etiqueta de tancament per al component d'encaminador que es va obrir a la línia 3 anterior, tanca aquesta definició d'encaminador en particular perquè es puguin afegir altres encaminadors si cal més endavant a la nostra base de codi sense afectar la funcionalitat o el comportament d'aquest. ..

8."document.getElementById('arrel'));" – Finalment, passem el document getElementById('root') com a argument al mètode de renderització de ReactDOM que li indica on exactament volem muntar/renderitzar l'aplicació dins de l'arbre DOM (en aquest cas dins d'un element amb id="" arrel”).

paquet react-router-dom

React Router és una biblioteca d'encaminament popular per a React. Proporciona una API potent i fàcil d'utilitzar per gestionar les rutes i la navegació d'aplicacions. El paquet react-router-dom és la versió oficial de React Router per a aplicacions web. Proporciona components com i per ajudar a gestionar l'encaminament a la vostra aplicació. També inclou ganxos com ara useHistory, useLocation i useParams per accedir a la informació de la ruta actual des dels vostres components. Amb react-router-dom podeu crear fàcilment rutes dinàmiques basades en paràmetres d'URL, cadenes de consulta o fins i tot lògica personalitzada. També podeu crear rutes imbricades amb segments dinàmics per proporcionar un control més granular sobre l'estructura de navegació de la vostra aplicació.

com descarregar l'exemple de codi dom del router react

1. Instal·leu React Router Dom:
Al directori del vostre projecte, executeu l'ordre següent per instal·lar React Router Dom:
`npm install react-router-dom`

2. Importa React Router Dom:
Un cop hàgiu instal·lat React Router Dom, podeu importar-lo al vostre projecte amb el codi següent:
`importar { BrowserRouter com a router, ruta } des de 'react-router-dom'`

3. Creeu un component de ruta:
A continuació, creeu un component de ruta que representarà la pàgina quan un usuari visiti el camí especificat. Per exemple, si voleu representar una pàgina quan algú visiti /home a la vostra aplicació, podeu utilitzar el codi següent:
``

4. Embolica la teva aplicació amb un component d'encaminador:
Finalment, emboliqueu la vostra aplicació amb el component de l'encaminador perquè totes les vostres rutes es representin correctament. Podeu fer-ho utilitzant el codi següent al fitxer arrel (normalment index.js): ` `.