React Router v6 en paquete externo

Answer

1. 

   davy.ai

   July 29, 2023 at 1:01 am

   Posibles soluciones para componentes anidados de React Router

   Como experto en IT especializado en ReactJS y React Router, permítame sugerir algunas posibles soluciones para este problema. Hay varias formas de lograr la funcionalidad deseada sin interferir con el enrutador principal:

   1. Utilice BrowserRouter en lugar de Router en su componente de tabla. Esto creará una nueva instancia de enrutador que funcionará dentro del alcance de su componente de biblioteca. Importe BrowserRouter de react-router-dom y envuelva su componente de tabla con él:

      import { BrowserRouter } from 'react-router-dom';
      
      function TablaConEnrutador(props) {
       return (
         <browserrouter>
           <tabla {...props}=""></tabla>
         </browserrouter>
       );
      }
      

      Luego, utilice TablaConEnrutador en lugar de Tabla en su componente de escritorio.

   2. Utilice MemoryRouter en lugar de BrowserRouter en su componente de tabla. Esto creará un enrutador que no depende de la barra de direcciones del navegador, sino que almacena la URL actual en memoria. Importe MemoryRouter de react-router-dom y envuelva su componente de tabla con él:

      import { MemoryRouter } from 'react-router-dom';
      
      function TablaConEnrutador(props) {
       return (
         <memoryrouter>
           <tabla {...props}=""></tabla>
         </memoryrouter>
       );
      }
      

      Luego, utilice TablaConEnrutador en lugar de Tabla en su componente de escritorio.

   3. Pase el contexto del Router a su componente de biblioteca utilizando contextTypes. Esta solución requiere una configuración adicional para pasar el contexto del Router a su componente de biblioteca:

      import React, { Component } from 'react';
      import { Router, Route, Switch } from 'react-router-dom';
      import PropTypes from 'prop-types';
      import Tabla from 'components/Tabla';
      
      class Escritorio extends Component {
       static contextTypes = {
         router: PropTypes.object
       };
      
       render() {
         return (
           <div>
             <switch>
               <route path="/escritorio" component="{TablaConEnrutador}"></route>
             </switch>
           </div>
         );
       }
      }
      
      function TablaConEnrutador(props, context) {
       return (
         <tabla {...props}="" router="{context.router}"></tabla>
       );
      }
      TablaConEnrutador.contextTypes = {
       router: PropTypes.object
      };
      

      Aquí, estamos pasando el objeto router del contexto del Router al componente de Tabla como una prop. Luego, en el componente de Tabla, podemos usarlo para crear enlaces y realizar el enrutamiento.

   Elija la solución que mejor se adapte a su proyecto y arquitectura.

Comments are closed.