Réagir history.push() met à jour l'url mais ne navigue pas dans le navigateur

Question

J'ai lu beaucoup de choses à propos de react-router v4 et de la bibliothèque d'historique npm, mais aucune n'a l'air de m'aider.

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

Je voudrais que le bouton pousser fasse une simple redirection sans le {forceRefresh: true}, qui recharge alors 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> 
    ) 
    } 
} 

Answer 1

Vérifiez si vous n'avez pas imbriqués balises BrowserRouter.

J'ai eu ce problème sur le routeur de réaction-v4 mais je l'ai résolu après avoir changé l'application pour avoir seulement le BrowserRouter au plus haut niveau comme l'exemple ci-dessous.

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

Answer 2

J'ai le même problème.

Après quelques recherches, j'ai trouvé ce react-router issue

Je rétrograder actuellement réagir-routeur à la v3 et j'utiliser browserHistory du paquet react-router et il est beau travail.

Answer 3

Vous ne devriez pas avoir besoin de rétrograder vers v3, React-Router 4.0.0 est totalement capable d'accomplir ce que l'OP demande.

const history = createBrowserHistory(); 

est un objet historique personnalisé de sorte que vous devez utiliser <Router> pour le synchroniser avec réagir-routeur au lieu de <BrowserRouter>, qui est ce que je suppose que vous utilisiez.

Essayez ceci:

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 votre objet historique personnalisé est passé via le pilier de l'histoire du routeur, history.push devrait fonctionner comme prévu dans ne importe où de votre application. (vous voudrez peut-être mettre votre objet historique dans un fichier de configuration de l'historique et l'importer aux endroits où vous voulez router par programmation)

Espérons que cette aide!

Pour plus d'informations, voir: React Router history object

Answer 4

Mesdames et messieurs. Pour le routeur V4. C'est ce qui a fonctionné pour moi. La réponse de Tina @ n'a pas fonctionné pour moi. Ajouter ces étapes suivantes pour le faire fonctionner

History.js 
import createHistory from 'history/createBrowserHistory'; 

export default createHistory({ 
basename: '/' //This is very important! Set your basename for the history 
class to track 

})

Ensuite,

ActionClass.js 

import History from History.js 

function doSomething(blah){ 
return dispatch => { 
    //Make your service calls 
    //process response 
    // 
    History.push(//path you want the user to be navigated to. Note all this does is add the url path in the address bar) 
    History.go (//this should force the browser to actually get going) 
}