react-router-dom v4 以编程方式重定向到

Question

我有一个UserLogin 组件，它将发送一个请求，并且在得到响应后我想重定向到AfterLogin 组件。

if (xhr.status === 200) {
                // success
                this.context.history.push('/dashboard')
            }

经过大量搜索，我的 react-router-dom v4 路由器看起来像这样：

import { BrowserRouter as Router, Route, Switch,Redirect} from 'react-router-dom'
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

<Router forceRefresh={false} history={history}>
        <div>
            <Switch>
                <Route exact path="/" render={() => (
                    Auth.isUserAuthenticated() ? (
                        <DashboardPage/>
                    ) : (
                        <LoginPage/>
                    )
                )}/>
                <Route path="/dashboard" render={() => (
                    Auth.isUserAuthenticated() ? (
                        <DashboardPage/>
                    ) : (
                        <Redirect to="/login"/>
                    )
                )}/>
                <Route path="/login" render={() => (
                    Auth.isUserAuthenticated() ? (
                        <Redirect to="/dashboard"/>
                    ) : (
                        <LoginPage/>
                    )
                )}/>
                <Route path="*" component={Error}/>
            </Switch>
        </div>
    </Router>

除了this.context.history.push('/dashboard')part 之外，一切都运行良好。登录后如何重定向用户？通过使用该方法，我在控制台中看到 this.context 未定义。

Cannot read property 'push' of undefined

Answer 1

您需要指定您希望组件可以访问哪些上下文属性。假设您的 xhr 请求在您的 UserLogin 组件中，您将需要添加以下内容以访问 context.history。

UserLogin.contextTypes = {
    history: React.PropTypes.object,
};

但你不应该使用上下文，而应该使用 React Routers withRouter 函数，它将 history 放在组件的 props 上。

https://reacttraining.com/react-router/web/api/withRouter

import { withRouter } from 'react-router-dom';

class UserLogin extends React.Component { ... }

// can call history with this.props.history in UserLogin now
export default withRouter(UserLogin);