Estoy creando una biblioteca que incluye la dependencia de react-router-dom. Hay algunos componentes en los que estoy usando react-router-dom NavLink, por ejemplo, llamémoslo Encabezado:
Header.tsx
export const Header = () => ( <div> <NavLink to="/home">Home</NavLink> </div> );Tenga en cuenta que esto es solo un ejemplo, para entender cómo estoy usando los elementos react-router-dom. Entonces, después de compilar y publicar esta biblioteca, quiero usarla en mi proyecto de reacción principal, donde incluyo este componente de encabezado y tengo un contenedor principal de BrowserRouter, por lo que se ve así:
App.tsx
export const App = () => ( <BrowserRouter> <Header /> </BrowserRouter> );Pero en lugar de mostrar la página, da el siguiente error:
Invariant failed: You should not use <NavLink> outside a <Router>
¿Alguna idea de qué podría estar mal y cómo resolverlo? La versión de React es 16 en el proyecto principal y v17 en la biblioteca. Las versiones del enrutador son 5.3.0 en ambos proyectos.
¿Podría ser causado por las diferentes versiones de reacción?
No hay información clara o evidencia sobre por qué su código se está descifrando según la información que ha proporcionado.
Con React-router-dom, debe colocar todas sus etiquetas NavLink, Switch, Route, Link dentro de su etiqueta principal <BrowserRouter> </BrowserRouter> .
Pero el ejemplo que ha mostrado en la pregunta funciona sin ningún problema.
Encabezado.js
import React from "react" import {NavLink} from "react-router-dom" const Header = () => { return( <div> <NavLink to="home"> Take Me Home </NavLink> </div> ) } export default Headeraquí está App.js
import React from "react" import Header from "./Header" import {BrowserRouter as Router, NavLink} from "react-router-dom" // importing BrowserRouter as a Router is not required, it's just standard practice cosnt App = () => { <div> <Router> <h1> Hello </h1> <NavLink to="about"> About </NavLink> <Header /> </Router> </div> } export default AppEste código anterior funciona sin problemas. Aunque su código debería funcionar, ya que no funciona, primero debe verificar nuevamente si hay algún error en la ubicación de las importaciones, error tipográfico.
si aún no funciona, debe investigar los conflictos de versión de React, siempre se recomienda usar la última versión en su proyecto principal.
El error indica que el componente del enrutador no envuelve el componente del encabezado.
No ha compartido el código de BrowserRouter, pero asegúrese de que BrowserRouter comience con <Router> y termine con </Router> .
Podría tener problemas en BrowserRouter .
BrowserRouter debe comenzar con <Router> y terminar con </Router> . Entonces deberías importar correctamente el componente Header.