Actualmente estoy trabajando en un proyecto de React que muestra una lista de datos en un componente secundario y hacer clic en cualquier dato individual enrutaría la aplicación web a un componente con más detalles.

Sin embargo, para mostrar los datos, necesito ordenar los datos en función de otra información. Como tal, una vez que se ordena esta información, lo ideal sería representar una matriz de elementos de enlace para reemplazar un div que contenga todos los datos. Sin embargo, cuando intento renderizar(), recibo un error que dice "Error: Invariable falló: no debe usar el enlace fuera de un navegador enrutador". Creo que esto ocurre porque el método de renderizado no reconoce que el div que se está renderizando está dentro de un elemento BrowserRouter creado en el componente principal.

¿Hay alguna forma de superar esto? Si ayuda, mi versión de reacción es 17.0.2 y creo que mi versión de reacción-router-dom es 3.

EDITAR: Me disculpo por algunos de los errores tipográficos que ocurrieron, publiqué a toda prisa. Aquí hay un enlace a una caja de códigos: https://codesandbox.io/s/react-playground-forked-34k2j?from-embed

Si comenta el elemento de enlace dentro de la función actualizar (), reemplazar el elemento funciona bien. Es solo cuando se crea un enlace a pesar de que está envuelto por un BrowserRouter en el componente principal.