React history.push() aktualisiert URL, aber nicht im Browser navigieren

Question

Ich habe viele Dinge über react-Router v4 und die npm-History-Bibliothek zu diesem Zeitpunkt gelesen, aber keiner scheint mir zu helfen.

Mein Code funktioniert wie erwartet bis zu dem Punkt, wenn es navigieren und eine einfache Umleitung ausführen soll, wenn die URL mit der history.push() -Methode geändert wird. Die URL ändert sich zur angegebenen Route, führt jedoch nicht die Umleitung beim Drücken der Schaltfläche aus. Vielen Dank im Voraus, immer noch lernen, react-router ...

Ich möchte für die Schaltfläche drücken, um eine einfache Weiterleitung ohne die {ForceRefresh: True}, die dann lädt die ganze Seite.

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

Überprüfen Sie, ob Sie nicht BrowserRouter Tags verschachtelt sind.

Ich hatte dieses Problem auf React-Router V4, aber ich löste es nach dem Ändern der App, nur den BrowserRouter auf der obersten Ebene wie das Beispiel unten zu haben.

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

Answer 2

Ich habe das gleiche Problem.

Nach einiger Suche fand ich diese react-router issue

ich haben derzeit Herabstufung reagieren-Router zum v3 und ich verwende browserHistory vom react-router Paket und es ist gut funktionieren.

Answer 3

Sie sollten nicht auf v3 downgraden müssen, React-Router 4.0.0 ist vollständig in der Lage, die Anforderungen des OP zu erfüllen.

const history = createBrowserHistory(); 

ist eine eigene Geschichte Objekt, so dass Sie <Router> zu synchronisieren es mit reagieren-Router statt <BrowserRouter> verwenden sollte, das, was ich davon ausgegangen, Sie verwendet haben.

Versuchen Sie stattdessen:

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

Sobald Ihre individuelle Geschichte Objekt wird über Router Geschichte prop eingeleitet, history.push sollte einfach funktionieren wie in jedem Ort Ihrer Anwendung erwartet. (Sie könnten Ihr History-Objekt in eine History-Konfigurationsdatei einfügen und es an Stellen importieren, an denen Sie programmgesteuert routen möchten.)

Hope this help!

Weitere Informationen finden Sie unter: React Router history object

Answer 4

Damen und Herren. Für Router V4. Das hat bei mir funktioniert. @ Tinas Antwort funktionierte nicht für mich. diese folgenden Schritte um es zu bekommen

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

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

})

Weiter arbeiten,

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