web-dev-qa-db-fra.com

Réagissez history.Push () met à jour l'URL mais ne navigue pas dans le navigateur

À ce jour, j'ai lu beaucoup de choses sur react-router v4 et sur la bibliothèque d'historique npm, mais rien ne semble pouvoir m'aider. 

Mon code fonctionne comme prévu jusqu'au moment où il doit naviguer et effectuer une redirection simple lorsque l'URL est modifiée à l'aide de la méthode history.Push (). L'URL IS change pour la route spécifiée, mais ne fait pas la redirection sur le bouton Push. Merci d'avance, toujours en train d'apprendre react-router ... 

J'aimerais que le bouton Push fasse une redirection simple sans {forceRefresh: true}, qui recharge ensuite toute la page. 

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>
      )
  }
}
history.jsreact-router-v4
24
John

Vérifiez si vous n'avez pas de balises imbriquées dans BrowserRouter. 

J'ai eu ce problème sur react-router v4, mais je l'ai résolu après avoir modifié l'application pour avoir uniquement BrowserRouter au plus haut niveau, comme dans l'exemple ci-dessous.

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

React-Router 4.0.0 est tout à fait capable d'accomplir ce que l'OP demande. 

const history = createBrowserHistory();

est un objet d’historique personnalisé, vous devez donc utiliser <Router> pour le synchroniser avec react-router au lieu de <BrowserRouter>, ce que j’imaginais que vous utilisiez.

Essayez ceci à la place: 

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 />
       )
   }
}

Une fois que votre objet d’historique personnalisé est transmis via l’accessoire d’historique du routeur, history.Push devrait fonctionner comme prévu dans n’importe où dans votre application. (vous souhaiterez peut-être placer votre objet d'historique dans un fichier de configuration d'historique et l'importer à des emplacements où vous souhaitez router par programme).

Pour plus d'informations, voir: Objet d'historique de React Router

24
Tina Chen

Rendre ceci actualiserait le changement d'itinéraire

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

réagir-routeur-dom: 4.2.2

4
bathi d

J'ai le même problème.

Après quelques recherches, j'ai trouvé ce problème réagit-routeur

Je suis actuellement rétrogradé vers la v3 et j'utilise browserHistory à partir du paquet react-router et tout fonctionne bien.

0
ndufreche