Question

我尝试使用React Route V4来构建app的路径。

如下：

import createHistory from 'history/createBrowserHistory';

const history = createHistory();    
<Provider store= {store}>
        <MuiThemeProvider>
            <Router history={history}>
            <div>
                    <LayoutContainer/>
          <Route exact path="/" component={Home} />
          <Route path="/records" render={() =>{
                return (<DealsContainer/>)
          }}/>
          <Route path="/sign_in" component={SignInContainer}/>
            </div>
          </Router>
        </MuiThemeProvider>
    </Provider>

我比较了方法this.props.history.push('/')和history.push("/")，当我将它用于不同的生命周期方法时，我发现它们是不同的方式。

//dealsContainer.js    
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import history from '../_helpers/history';

componentDidMount(){
 //history.push("/sign_in");                  //browser url will change but no redirect
//this.props.history.push("/sign_in");            //it work
}
render(){
 if(this.props.authenticate.LoggedIn == false){
  //this.props.history.push("/sign_in");          // it work
  //history.push("/sign_in");                     // it work
}

const mapStateToProps = (state) => {
 return{
  deals: state.deals,
  authenticate: state.authenticate,
 }
};
export default withRouter(connect(mapStateToProps)(DealsContainer))

history.push("/")函数中的asyncActions无效。是否可以让它在asyncActions中工作？

React Route V4历史记录已推送，但页面未重定向

0 个答案: