¿Por qué aparece la advertencia «El enrutador puede tener solo un elemento secundario»?

React Router Dom es una colección de componentes de navegación que se componen de forma declarativa con su aplicación. Ya sea que desee tener URL marcadas para su aplicación web o una forma componible de navegar en React Native, React Router Dom funciona en ambos lugares. Tomaremos en consideración la última versión de React-router ahora disponible, es decir, react-router-dom v5.3.0.

Características de React-router-dom:

• Mejor soporte y optimización para React 16.
• No muestra ninguna advertencia en <StrictMode> .
• Introducción de una nueva API de contexto.
• Lanzamientos totalmente automatizados.
• Bully compatible con versiones anteriores de react-router-v4.

Sintaxis:

import { Route, Link, BrowserRouter as 
        Router } from 'react-router-dom'
<Router>
    <div>
        <Route path="/" component={App} /> </div>
</Router>

El fragmento de código anterior indica cómo funciona el enrutador de reacción. Primero importamos las etiquetas requeridas de la dependencia react-router-dom. Tenga en cuenta que está escrito BrowserRouter como enrutador. Esto es para que podamos usar la etiqueta <Router> para indicar <BrowserRouter> . La etiqueta <Router> es donde comienza la funcionalidad de enrutamiento de la aplicación. Si se establece una ruta dentro del componente <Router>, entonces esa ruta se vuelve accesible como una nueva página dentro de nuestra aplicación de reacción a la que podemos navegar. Para especificar la ruta dentro de <Router> , usamos el componente <Route > que toma un argumento llamado ruta h, como se puede ver en el ejemplo anterior. Aquí es donde creamos la ruta a una nueva página web pasándola al argumento de la ruta. El argumento del componente se utiliza para constituir los datos que la página web mostrará al ir a la ruta especificada en el argumento de la ruta.

Nota: La ruta “/” significa ruta por defecto o home, lo que significa que al especificar su ejecución, el router nos enrutará al punto de inicio de la aplicación o a la página de inicio de la aplicación. Para crear una ruta personalizada, simplemente escriba «/pathname» y se creará una nueva ruta a una nueva página web dentro de la aplicación, con el nombre «pathname».

Ventajas de React-router:

• Ver declaraciones en una estructura estandarizada nos ayuda a comprender instantáneamente cuáles son las vistas de nuestra aplicación.
• Lazy loading de código.
• Usando el enlace useHistory de React-router, podemos navegar hacia adelante y hacia atrás e incluso restaurar el estado de nuestra aplicación.
• Tenemos la facilidad de codificar transiciones CSS al navegar de una página a otra.
• Proporciona una estructura de aplicación estandarizada. Muy útil cuando se trabaja con equipos grandes.

Razones para recibir la advertencia/error: Entonces, en cuanto al motivo de este artículo, los desarrolladores novatos a menudo se encuentran con una advertencia muy popular cuando trabajan con el enrutador de reacción, simplemente conocido como «El enrutador puede tener solo un hijo «. Antes de saber cómo solucionar este problema, comprendamos por qué ocurre. Generalmente, la navegación en un entorno basado en React se usa en toda la aplicación. Es por eso que los componentes de React como BrowserRouter o Router esperan que solo el componente de nivel superior que es <App> se incluya dentro de ellos. Por lo tanto, no pueden funcionar cuando se enumeran varias rutas dentro de ellos como elementos secundarios.

Solución: La solución a este problema es, sin embargo, bastante sencilla. Simplemente necesita encerrar las rutas múltiples en una etiqueta <div> o una etiqueta <Switch> . La etiqueta <Switch> se prefiere principalmente de las dos, ya que <Switch> es único y puede representar una ruta exclusivamente.

Creando una aplicación de reacción:

Paso 1: para crear un proyecto de reacción, abra el símbolo del sistema y escriba el siguiente comando:-

npx create-react-app test

Paso 2: ahora navegue hasta el nuevo directorio creado escribiendo,

cd test

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 3: Aquí modificaremos solo el archivo App.js. Este fragmento de código generará el error «El enrutador puede tener solo un hijo «, ya que puede ver que varias rutas se han encerrado dentro de una sola etiqueta <Router> , que no es compatible.

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
   
function App() {
    return (
    <div className="App">
      <Router>
        <Route path='/child1'>
          <div>
            <p>This is child route 1</p>
          </div>
        </Route>
        <Route path='/child2'>
          <div>
            <p>This is child route 2</p>
          </div>
        </Route>
      </Router>
    </div>
    );
}
   
export default App;

Paso 4: Aquí estamos haciendo un cambio significativo: las múltiples rutas ahora están encerradas dentro de una etiqueta <Switch> y, por lo tanto, este fragmento de código se ejecutará sin problemas.

import React from "react";
import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
  
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/child1">
            <div>
              <p>This is child route 1</p>
            </div>
          </Route>
          <Route path="/child2">
            <div>
              <p>This is child route 2</p>
            </div>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

Cambiar la ruta para mostrar una nueva página web

Así es como puede resolver el problema de «El enrutador puede tener solo un hijo » con facilidad.