Réagir à l'histoire.push() est la mise à jour de l'url mais pas à naviguer dans le navigateur

J'ai lu beaucoup de choses à propos de réagir-routeur v4 et le mécanisme national de prévention de l'histoire de la bibliothèque sur ce point, mais aucune ne semble être m'aider.

Mon code fonctionne comme prévu, jusqu'au moment où il doit naviguer et de faire une simple redirection lorsque l'url est modifiée à l'aide de l'histoire.méthode push (). L'URL EST en train de changer pour l'itinéraire spécifié, mais pas de la redirection sur le bouton-poussoir. Merci d'avance, continue d'apprendre à réagir-routeur...

Je voudrais que le bouton de la pousser à faire une simple redirection sans l' {forceRefresh:true}, qui recharge la page entière. 

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

OriginalL'auteur John | 2017-03-22

  1. 9

    Vérifier si vous n'avez pas imbriquée BrowserRouter balises.

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

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

    OriginalL'auteur Artur Carvalho

  2. 21

    Vous ne devriez pas avoir besoin de passer à la v3, Réagissent-Routeur 4.0.0 est totalement capable d'accomplir ce que l'OP demande. 

    const history = createBrowserHistory();

    est une coutume de l'histoire de l'objet de sorte que vous devriez utiliser <Router> afin de le synchroniser avec réagissent-routeur au lieu de <BrowserRouter>, qui est ce que je suppose que vous utilisez.

    Essayez plutôt 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 personnalisé de l'histoire de l'objet est transmis via le Routeur de l'histoire de la prop, de l'histoire.pousser devrait fonctionner comme prévu dans n'importe quel endroit de votre application. (vous pouvez mettre votre histoire de l'objet dans une histoire de config fichier et les importer dans des endroits où vous voulez itinéraire par programmation).

    Pour plus d'info, voir: Réagir Routeur histoire de l'objet

    Wow merci! C'est la seule réponse que j'ai vu qui explique que vous devez utiliser <Router/> au lieu de <BrowserRouter/> lors de l'utilisation de l'histoire paquet.
    C'est la plus correcte de la solution que j'ai trouvé dans ma recherche des 4 derniers jours
    seule solution que j'ai pu obtenir pour travailler, merci.
    Oui! C'est génial merci!!!!

    OriginalL'auteur Tina Chen

  3. 4

    Rendu ce serait d'actualisation sur la route à modifier

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

    réagir-routeur-dom : 4.2.2

    OriginalL'auteur bathi d

  4. 0

    J'ai le même problème.

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

    J'ai actuellement downgrade réagir-routeur à la v3 et je l'utilise browserHistory de la react-router paquet et c'est un travail très bien.

    Ouais, c'est ce que j'ai fait trop, j'ai l'intention de coller avec de la v3 pour peu maintenant. Merci!

    OriginalL'auteur ndufreche