React Router history.push aktualisiert die URL, aktualisiert aber die Komponente nicht, wenn sie mit redux verwendet wird

Question

Ich verwende react und redux für meine Anwendung. ich meine Routen haben definiert als

<HashRouter> 
    <div className="container"> 
     <Route path="/register" component={Register} /> 
     <Route path="/login" component={Login} /> 
    </div> 
</HashRouter> 

folgt Und ich habe meine Komponenten definiert als

export default connect(mapStateToProps)(Login); 
export default connect(mapStateToProps)(Register); 

Nun, sobald die Registrierung erfolgt ich den Benutzer auf login Seite umleiten möchten. Also, wenn die Anmeldung erfolgreich war ich ihm login von meiner UserAction Funktion bin Umleitung wie folgt

UserService.register(user) 
    .then(
      user => { 
       dispatch(success()); 
       history.push('/#/login'); //<== here is the issue 
      }, 
      error => { 
       dispatch(failure(error)); 
      } 
     ); 

Die history.push über die URL ändert sich aber nicht lädt die Login Komponente.

Ich habe auch versucht

export default withRouter(connect(mapStateToProps)(Login)); 
export default withRouter(connect(mapStateToProps)(Register)); 

Aber noch kein Glück. Irgendeine Lösung wie man das beheben kann?

Hinweis: Ich bin nicht mit react-router-redux

Answer 1

Haben Sie versucht:

this.context.router.push('/page'); 

Wenigstens können Sie mir sagen, was Version Ihre redux-Router ist?

In Ihrer Indexdatei Ich schlage vor, Sie, dass:

import routes from './routes' 
    ReactDOM.render((
     <Provider store={store}> 
     <Router history={hashHistory} routes={routes}/> 
     </Provider>), document.getElementById('root') 
    ); 

Und in der Route-Datei:

<Route path="/" component={App}> 
    <IndexRoute component={requireAuth(Home)}/> 
    <Route path="signup" component={SignUp}/> 
</Route> 

Haben Sie Fehler in Ihrer Konsole?

Answer 2

Warum möchten Sie sogar die Route mit History Push ändern?

Es kann einfach über location.hash Methode (seit Sie HashRouter verwenden) und natürlich der Browser und die Reaktion selbst ist genug intelligent, um es in der Geschichte des Browsers zu speichern.

so, wann immer Sie wollen, verwenden Sie die URL ändern, nur so etwas wie:

location.hash = "/myroute/10/secondroute"

und denken Sie daran, dass Sie <Link> Komponente verwenden können, die URL zu ändern, indem reagieren-Router selbst und stört sich nicht verwalten Hash oder die Geschichte.

Link bietet eine deklarative, barrierefreie Navigation für Ihre Anwendung.

Verbrauch:

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

ODER

<Link to={{ 
    pathname: '/courses', 
    search: '?sort=name', 
    hash: '#the-hash', 
    state: { fromDashboard: true } 
}}/> 

More informations