Programmgesteuertes Navigieren Sie mittels der Reaktion-router

Wenn man bedenkt Sie sind mit react-router v4

Verwenden Sie Ihre Komponente mit withRouter und verwenden history.push von Requisiten, um die route zu ändern. Sie brauchen, um machen Verwendung von withRouter nur, wenn Ihre Komponente nicht empfangen die Router Requisiten, das kann passieren, in den Fällen, wenn Ihre Komponente eine verschachtelte Kind von einer Komponente erbracht, die durch den Router und Sie nicht bestanden haben die Router Requisiten, um es, oder wenn die Komponente keine Verbindung mit dem Router und wird so dargestellt, als separate Komponente aus den Routen.

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     componenDidMount() {
        //get isLoggedIn from localStorage or API call
        if (isLoggedIn) {
             //dispatch an action to change the route
             this.props.history.push('/home');
        }
     }
     render() {
         //return login component
         return <Login />
    }
}


export default withRouter(App);

Wichtiger Hinweis

Wenn Sie withRouter um zu verhindern, dass updates geblockt
shouldComponentUpdate ist es wichtig, dass withRouter umschließt die
Komponente implementiert shouldComponentUpdate. Zum Beispiel, wenn
mit Redux:

//Hier wird rund um shouldComponentUpdate

withRouter(connect(...)(MyComponent))

//Dies nicht

connect(...)(withRouter(MyComponent))

oder verwenden Sie Umleiten

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     render() {
         if(isLoggedIn) {
              return <Redirect to="/home"/>
         }
         //return login component
         return <Login />
    }
}

Mit react-router v2 or react-router v3 Sie können Gebrauch machen von context dynamisch die route zu ändern, wie

class App extends React.Component {
     ...
     render() {
         if (isLoggedIn) {
             //dispatch an action to change the route
             this.context.router.push('/home');
         }
         //return login component
         return <Login />
    }
}

App.contextTypes = {
    router: React.PropTypes.object.isRequired
}
export default App;

oder verwenden Sie

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

Andere alternative ist es zu handhaben mit Thunk-Stil asynchronen Aktionen (die sind sicher/haben darf, die Nebenwirkungen).

Wenn Sie Thunk, können Sie Spritzen den gleichen history Objekt in Ihrem <Router> Komponente und Thunk-Aktionen mit thunk.withExtraArgument wie diese:

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
import { createBrowserHistory } from "history"
import { applyMiddleware, createStore } from "redux"
import thunk from "redux-thunk"

const history = createBrowserHistory()

const middlewares = applyMiddleware(thunk.withExtraArgument({history}))
const store = createStore(appReducer, middlewares)

render(
  <Provider store={store}
    <Router history={history}>
      <Route path="*" component={CatchAll} />
    </Router
  </Provider>,
appDiv)

Dann im action-Macher, Sie haben history Instanz, das ist sicher mit ReactRouter, so können Sie nur auslösen, eine regelmäßige Redux-Ereignis, wenn Sie nicht angemeldet:

//meanwhile... in action-creators.js
export const notLoggedIn = () => {
  return (dispatch, getState, {history}) => {
    history.push(`/login`)
  }
}

Ein weiterer Vorteil ist, dass die url ist einfacher zu handhaben, jetzt, so können wir setzen redirect info auf den query-string, etc.

Können Sie versuchen noch, dies zu tun überprüfen Sie in Ihrem Render-Methoden, aber wenn es Probleme gibt, sollten Sie überlegen, es zu tun in componentDidMount oder an anderer Stelle im Lebenszyklus (obwohl auch ich den Wunsch verstehen, stick mit Zustandslose Funktionale Compeonents!)

Können Sie immer noch verwenden Redux und mapDispatchToProps zu injizieren, die Aktion Schöpfer in Ihr comptonent, so Ihre Komponente ist nur noch lose mit Redux.

render(){ 

    return (
        <div>  
            { this.props.redirect ? <Redirect to="/" /> :'' } 
            <div>
                add here component codes
            </div>
        </div>
    );
} 

Ich würde vorschlagen, Sie verwenden verbunden-reagieren-router https://github.com/supasate/connected-react-router
das hilft, um ausführen die navigation auch aus Reduzier - /Aktionen, wenn Sie wollen.
es ist gut dokumentiert und einfach zu konfigurieren