Estoy tratando de entender la diferencia entre BrowserRouter y Router del paquete react-router-dom (v5) y qué diferencia hace para mi ejemplo a continuación.
La documentación dice:
BrowserRouter A que usa la API de historial de HTML5 (pushState, replaceState y el evento popstate) para mantener su interfaz de usuario sincronizada con la URL.
Fuente: https://reacttraining.com/react-router/web/api/BrowserRouter
Enrutador La interfaz común de bajo nivel para todos los componentes del enrutador. Por lo general, las aplicaciones usarán uno de los enrutadores de alto nivel en su lugar: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter
Fuente: https://reacttraining.com/react-router/web/api/Router
Por lo que entiendo, debería usar BrowserRouter para mis aplicaciones de navegador HTML5 y lo he estado haciendo hasta ahora.
historia.push(...) ejemplo:
Estoy tratando de realizar un history.push('/myNewRoute') dentro de un thunk:
import history as './history'; ... export function someAsyncAction(input) { return dispatch => { fetch(`${API_URL}/someUrl`, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ input }), }).then(() => { history.push('/myNewRoute'); }).catch((err) => { dispatch(setError(err)); }) }; }; history se define como este módulo:
import { createBrowserHistory } from 'history'; export default createBrowserHistory(); y el history también se pasa a mi enrutador:
import { BrowserRouter as Router } from 'react-router-dom'; import history as './history'; ... const App = () => ( <Router history={history}> ... </Router> ); Problema: history.push() actualizará la URL en la barra del navegador pero no representará el componente detrás de la ruta.
Si importo Router en lugar de BrowserRouter , funciona:
// Does not work: import { BrowserRouter as Router } from 'react-router-dom'; // Does work: import { Router } from 'react-router-dom';BrowserRouter ignora el accesorio de historial ya que maneja el historial automáticamente por usted. Si necesita acceder al historial fuera de un componente de reacción, entonces usar el Router debería estar bien.
Puede acceder al historial a través del enlace useHistory let history = useHistory(); para realizar history.push() para BrowserRouter.
Mirando la documentación de la API de historial de HTML5 , parece que la API de historial conserva el estado para el usuario automáticamente. Digamos que está en la página 1 inicialmente y la página 1 tiene una perspectiva de página A. Realizó algunas acciones que cambian la perspectiva de la página 1 a B. Si ahora pasa a la página 2, cuando haga clic en el botón Atrás en el navegador, estará Regrese directamente a la página 1. La API de historial conserva su estado para que sepa mostrarle la perspectiva B, por lo que esa es la ventaja de usar Esto no es cierto. No estoy seguro de la diferencia.BrowserRouter . Aunque no estoy 100% seguro, supongo que el Browser no viene con esta funcionalidad y, en cuyo caso, mostrará la perspectiva A cuando vuelva a la página 1.
Tengo el mismo problema.
BrowserRouter y useHistory() han sido usados para mi componente. Y se ha usado createBrowserHistory() para redux-saga. Pero, la página no se ha movido por redux-saga como tu caso.
Además de eso, mi fuente se ha desarrollado usando BrowserRouter, no quiero reemplazarlo por el componente Router.
Como mi pobre investigación, descubrí que ambos objetos de la historia son diferentes. (Los comparé con if y == .) Supongo que es la razón.
Para resolverlo, guardo la referencia del objeto de historial obtenido por useHistory() en algún código de utilidad global y lo uso en código redux-saga. Entonces, funciona bien.
No creo que esta sea la mejor manera, pero aún no pude encontrar la mejor y oficial.