history.js - props - static router react router dom

React history.push() está actualizando la URL pero no está navegando en el navegador

Question

He leído muchas cosas sobre react-router v4 y la biblioteca de historial de npm hasta este momento, pero ninguna parece ayudarme.

Mi código está funcionando como se esperaba hasta el momento en que debería navegar y hacer una redirección simple cuando se cambia la URL utilizando el método history.push (). La URL está cambiando a la ruta especificada, pero no está haciendo la redirección en el botón pulsado. Gracias de antemano, todavía aprendiendo reaccionar-enrutador ...

Me gustaría que la pulsación del botón hiciera una redirección simple sin {forceRefresh: true}, que luego vuelve a cargar toda la página.

import React from ''react'';
import createBrowserHistory from ''history/createBrowserHistory'';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}

Answer 1

Compruebe si no tiene etiquetas de BrowserRouter anidadas.

Tuve este problema en react-router v4, pero lo resolví después de cambiar la aplicación para que solo tuviera el BrowserRouter en el nivel más alto como el ejemplo a continuación.

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById(''root'')
);

Answer 2

No debería tener que bajar a la versión v3, React-Router 4.0.0 es totalmente capaz de cumplir con lo que solicita el OP.

const history = createBrowserHistory();

es un objeto de historial personalizado, por lo que debería usar <Router> para sincronizarlo con react-router en lugar de <BrowserRouter> , que es lo que asumí que estaba usando.

Intenta esto en su lugar:

import React, {Component} from ''react'';
import { Router } from ''react-router'';
import { Route } from ''react-router-dom'';
import createHistory from ''history/createBrowserHistory'';

const history = createHistory();   

class App extends Component {
   constructor(props){
      super(props);
   }

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                <Route exact path="/" component={Home} />
                <Route path="/other" component={Other} />
           <Router />
       )
   }
}

Una vez que su objeto de historial personalizado se transfiere a través de la característica de historial del enrutador, history.push debería funcionar como se espera en cualquier parte de su aplicación. (Es posible que desee colocar su objeto de historial en un archivo de configuración de historial e importarlo en los lugares donde desee enrutar programáticamente).

Para obtener más información, consulte: React Router history object

Answer 3

Representando esto se actualizaría en el cambio de ruta

 `ReactDOM.render(
    <AppContainer>
      <BrowserRouter children={routes} basename={baseUrl} forceRefresh={true}/>
    </AppContainer>,
    document.getElementById("react-app")
  );`

reaccion-router-dom: 4.2.2

Answer 4

Tengo el mismo problema.

Después de algunas búsquedas he encontrado este problema de reacción-enrutador

Actualmente, he bajado la versión de react-router a la v3 y uso browserHistory del paquete react-router y funciona bien.