React Router es una biblioteca estándar para enrutamiento en React. Permite la navegación entre vistas de diferentes componentes en una aplicación React, permite cambiar la URL del navegador y mantiene la interfaz de usuario sincronizada con la URL.
Para comprender cómo funciona React Router, creemos una aplicación simple para React. La aplicación incluirá los componentes de inicio, acerca de y contacto. Usaremos React Router para navegar entre estos componentes.
npx crear-reaccionar-aplicación
Su entorno de desarrollo está listo. Instalemos ahora React Router en nuestra aplicación.
Reaccionar enrutador : React Router se puede instalar en su aplicación React a través de npm. Siga los pasos a continuación para configurar el enrutador en su aplicación React:
Paso 1: CD en el directorio de su proyecto, es decir .,java.
Paso 2: use el siguiente comando para instalar React Router:
instalación npm - -save reaccionar-router-dom
Después de instalar reaccionar-router-dom, agregue sus componentes a su aplicación React.
Agregar componentes del enrutador React:
Los componentes principales de React Router son:
cuanto cero por un millon
En lugar de recorrer en secuencia, las rutas se seleccionan en función de la mejor coincidencia.
Para agregar componentes de React Router a su aplicación, abra el directorio de su proyecto en el editor que usa y vaya al archivo app.js. Ahora, agregue el siguiente código a app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Nota: BrowserRouter tiene el alias de Enrutador.
Usando reaccionar enrutador: Para usar React Router, primero creemos algunos componentes en la aplicación React. En el directorio de su proyecto, cree una carpeta llamada componentes dentro de la carpeta src y ahora agregue 3 archivos llamados home.js, about.js y contact.js en la carpeta de componentes.
Agreguemos algo de código a nuestros 3 componentes:
Inicio.js:
import React from 'react'; function Home (){ return } export default Home; Acerca de.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contacto.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Ahora, incluyamos los componentes de React Router en la aplicación:
NavegadorEnrutador : agregue un BrowserRouter con alias como enrutador a su archivo app.js para envolver todos los demás componentes. BrowserRouter es un componente principal y solo puede tener un componente secundario.
class App extends Component { render() { return ( ); } } Enlaces: Creemos ahora los enlaces de nuestros componentes. El componente Enlace utiliza accesorios para describir la ubicación a la que debe navegar el enlace.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Ahora, ejecute su aplicación en el host local y haga clic en el enlace creado. Notarás que las URL cambian según el valor del componente del enlace.
Ruta : El componente de ruta nos ayudará a establecer el vínculo entre la interfaz de usuario del componente y la URL. Para incluir la ruta en la aplicación, agregue el siguiente código a su app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Los componentes ahora están conectados y al hacer clic en cualquier enlace se mostrará el componente correspondiente. Intentemos ahora comprender los accesorios asociados con el componente raíz.
- Elemento se refiere al componente que se representará si la ruta coincide.
Nota: De forma predeterminada, las rutas son inclusivas, lo que significa que más de un componente de ruta puede coincidir con una ruta URL y representarse simultáneamente. Si queremos renderizar un solo componente, necesitamos usar rutas aquí.
Rutas : Para leer un solo componente, ajuste todas las rutas dentro del componente Rutas.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Cambie de grupo a través de múltiples rutas, repítalas y encuentre el primero que coincida con la ruta. Por lo tanto, se representa el componente correspondiente de la ruta.
Aquí está nuestro código fuente completo después de agregar todos los componentes:
cómo convertir caracteres a cadenas java
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Ahora puede hacer clic en el enlace y navegar por los diferentes componentes. React Router mantiene la interfaz de usuario de su aplicación sincronizada con la URL.
Finalmente, hemos implementado con éxito la navegación en nuestra aplicación React usando React Router.
Un que utiliza la API de historial HTML5 (eventos pushstate, replacestate y popstate) para mantener la interfaz de usuario sincronizada con la URL.
nombre base: cadena
URL base para todas las ubicaciones. Si su aplicación se sirve desde un subdirectorio de su servidor, querrá configurarla en ese subdirectorio. Un nombre base con el formato correcto debe contener una barra diagonal inicial, pero ninguna barra diagonal final.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Una función que se utiliza para confirmar la navegación. El valor predeterminado es usar window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: booleano
Si es verdadero, el enrutador utilizará actualizaciones de página completa en la navegación de la página. Es posible que desee utilizar esto para imitar cómo funcionaría una aplicación tradicional renderizada en un servidor con actualizaciones de página completa entre la navegación de la página.
longitud de la clave: número
La duración de la ubicación. Llave. El valor predeterminado es 6.
niños: nodo- elemento hijo a renderizar.
Nota: En React, debes usar un solo elemento secundario porque el método de renderizado no puede devolver más de un elemento. Si necesita más de un elemento, puede intentar envolverlos en un archivo adicional o .
A que utiliza la parte hash de la URL (es decir, ventana.ubicación.hash) para mantener su interfaz de usuario sincronizada con la URL.
al hacer clic en javascript
Nota: el hash no admite la ubicación del historial. Clave o ubicación. Estado. En versiones anteriores, intentamos reducir el comportamiento, pero hubo casos extremos que no pudimos resolver. Cualquier código o complemento que requiera este comportamiento no funcionará.
Dado que esta tecnología está destinada a admitir únicamente navegadores más antiguos, le recomendamos que configure su servidor para que funcione con ella.
nombre base: cadena
La URL base para todas las ubicaciones. Un nombre base con el formato correcto debe tener una barra diagonal inicial, pero ninguna barra diagonal final.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Una función que se utiliza para confirmar la navegación. El valor predeterminado es usar window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> tipo hash: cadena
La codificación utilizada para ventana.ubicación.hash . Los valores disponibles son:
- 'barra': crea hashes como #/ y #/sunshine/lollipops
- 'noslash' - # y #sol/piruletas. como crea hash
- 'hashbang': crea hashes 'ajax rastreables' (obsoletos por Google) como #!/ y #!/sunshine/lollipops
El valor predeterminado es 'barra'.
niños: nodo
Un único elemento hijo para renderizar.
Proporciona navegación declarativa y accesible por su aplicación.
About
Encadenar
Se crea una representación de cadena de la ubicación de un enlace combinando el nombre de ruta, la búsqueda y las propiedades hash de la ubicación.
Un objeto que puede tener cualquiera de las siguientes propiedades:
a: función
Una función en la que la ubicación actual se pasa como argumento y que debe devolver la representación de la ubicación como una cadena u objeto.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> reemplazar: booleano
Cuando es verdadero, al hacer clic en el enlace se reemplazará la entrada actual en lugar de agregar una nueva.
entry to the history stack.
referencia interna: función
A partir de React Router 5.1, si está utilizando React 16, no debería necesitar este accesorio ya que enviamos la referencia al subyacente . Utilice una referencia normal en su lugar.
Permite el acceso a la referencia incorporada del componente.
matrices java
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> referencia interna: objeto de referencia
A partir de React Router 5.1, si está utilizando React 16, no debería necesitar este accesorio porque enviamos la referencia al subyacente . Utilice una referencia normal en su lugar.
Obtenga la referencia subyacente del componente usando React.createRef.
let anchorRef = React.createRef()
componente: React.Component
Si desea utilizar su propio componente de navegación, puede hacerlo pasándolo a través del accesorio del componente.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> También puedes pasar accesorios que te gustaría que estuvieran en el como título, identificación, nombre de clase, etc.
Una versión especial agregará atributos de estilo al elemento representado si coincide con una URL existente.
About
nombre de clase: cadena | función
className puede ser una cadena o una función que devuelve una cadena. Si se utiliza la función className, el estado activo del enlace se pasa como parámetro. Esto es útil si desea aplicar exclusivamente un nombre de clase a un enlace inactivo.
intentar capturar capturar java
'nav-link' + (!isActive ? ' unselected' : '') } >
Preguntas frecuentes
En React Router v6, se eliminará activeClassName y deberá usar la función className para aplicar el nombre de clase a los componentes NavLink activos o inactivos.
Nombre de clase activa: cadena
clase para dar el elemento cuando está activo. La clase dada por defecto está activa. Se combinará con el accesorio de nombre de clase.
estilo: objeto | función
El estilo puede ser un objeto React.CSSProperties o una función que devuelve un objeto de estilo. Si se utiliza el estilo de función, el estado activo del enlace se pasa como parámetro.
({ color: isActive ? 'green' : 'blue' })} > En React Router v6, se eliminará el estilo activo y deberá usar el estilo de función para aplicar estilos en línea a los componentes NavLink activos o inactivos.
Estilo activo: objeto
Los estilos aplicados al elemento cuando está activo.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> estricto: booleano
Si es verdadero, la barra diagonal al final del nombre de ruta de una ubicación se considerará al determinar si la ubicación coincide con la URL actual. Consulte la documentación para obtener más detalles.
Events
isActive: func
Una función para agregar lógica adicional para determinar si el enlace está activo. Esto debe usarse cuando desea hacer algo más que verificar que la ruta del enlace coincida con la ruta de la URL actual.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 ubicación: objeto
isActive Se compara con la ubicación del historial actual (normalmente la URL actual del navegador).
aria-actual: cadena
El valor del atributo de área actual utilizado en el enlace activo. Los valores disponibles son:
- 'página': se utiliza para indicar un enlace dentro de un conjunto de enlaces de paginación
- 'Pasos': se utiliza para indicar un vínculo dentro del indicador de pasos para un proceso basado en pasos.
- 'ubicación': se utiliza para indicar una imagen que está resaltada visualmente como el componente actual del diagrama de flujo.
- 'fecha': se utiliza para indicar la fecha actual dentro del calendario.
- 'hora': se utiliza para indicar la hora actual dentro de un horario
- 'verdadero': se utiliza para indicar si NavLink está activo
- 'falso': se utiliza para evitar que las tecnologías de asistencia reaccionen al enlace actual (un caso de uso sería evitar múltiples etiquetas de área actual en una página)