Este es mi código index.js
import React from "react"; import { render } from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; import { BrowserRouter } from "react-router-dom"; import "@fortawesome/fontawesome-free/css/all.min.css"; import "bootstrap-css-only/css/bootstrap.min.css"; import "mdbreact/dist/css/mdb.css"; import { createStore } from "redux"; import { userReducer } from "../src/reducers/UserReducer"; import { Provider } from "react-redux"; import { loadState, saveState } from "./store/LocalStorage"; const persistedState = loadState(); let store = createStore(userReducer, persistedState); store.subscribe(() => saveState(store.getState())); render( <Provider store={store}> <BrowserRouter> <App /> </BrowserRouter> </Provider>, document.getElementById("root") ); serviceWorker.unregister();
Este es el error que estoy recibiendo en el navegador
" Error: no puede renderizar un <Router>
dentro de otro <Router>
. Nunca debe tener más de uno en su aplicación".
Por favor ayúdame con alguna solución.
Supongo que está utilizando React Router 6. Dejaron de admitir Router
anidados (como MemoryRouter
dentro de BrowserRouter
o cualquier otra combinación)
https://github.com/remix-run/react-router/issues/7375
Hay más bien un truco con <UNSAFE_LocationContext.Provider
pero, como sugiere el nombre, no está garantizado que funcione para cualquier actualización (incluso la versión de parche).
Le sugiero que vuelva a V5 o se deshaga de la anidación.