history.push in react router 4

时间:2017-09-14 06:39:38

标签: reactjs react-router history.js

如何使用反应路由器4有条件地将路径推送到历史记录?我收到错误' history.push不是函数'。

我不是在寻找重定向,而是使用浏览器中的后退按钮也能正常工作。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom';


import Signup from './components/Signup';
import Welcome from './components/Welcome';


class App extends React.Component {

    constructor() {
        super();
        this.state = {
            isLoggedIn: false
        };
    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/signup" component={Signup}/>
                    <Route exact path="/welcome" component={Welcome}/>
                    <Route exact path="/" render={() => (
                        this.state.isLoggedIn ?
                            history.push('/welcome') : history.push('/signup')
                    )}/>
                    <Redirect to="/"/>
                </div>
            </BrowserRouter>
        );

    }
}


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

1 个答案:

答案 0 :(得分:2)

Redirect组件上有一个选项可以完全按照您的需要进行操作。

<Redirect to="/" push />

将进行导航,并推送浏览器历史记录

history.push总觉得我错了:)