react-router-dom在reactjs中是否具有瀏覽器歷史記錄？

Question

browserHistory是否包含在react-router-dom中？ 如果不是，那么我如何使用history.push重定向到頁面？ 這是我的代碼，在我的代碼中何處添加更改？

LoginForm.js

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
          <div>
            <Back/>
         <header>
   <h1>Company Login</h1>
   </header>
      <form name="loginForm" onSubmit={this.onSubmit}>

        <div className="imgcontainer">
    <img src={avatar} alt={"Avatar"} className={"avatar"}/>
  </div>

        <div className="form-group-collection">
          <div className="form-group">

            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>


          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>
        <br/>

        <input type="submit" value="Login" />

  </form>

     <footer>Copyright &copy; multihands.com. </footer>
     </div> 
    )
  }






  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Reducer.js

import logindetls from '../../logindet.json';

const SET_LOGIN_PENDING = 'SET_LOGIN_PENDING';
const SET_LOGIN_SUCCESS = 'SET_LOGIN_SUCCESS';
const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';

export function login(username, password) {
  return dispatch => {
    dispatch(setLoginPending(true));
    dispatch(setLoginSuccess(false));
    dispatch(setLoginError(null));

    callLoginApi(username, password, error => {
      dispatch(setLoginPending(false));
      if (!error) {
        dispatch(setLoginSuccess(true));

      } else {
        dispatch(setLoginError(error));
      }
    });
  }
}

function setLoginPending(isLoginPending) {
  return {
    type: SET_LOGIN_PENDING,
    isLoginPending
  };
}

function setLoginSuccess(isLoginSuccess) {
  return {
    type: SET_LOGIN_SUCCESS,
    isLoginSuccess

  };
}

function setLoginError(loginError) {
  return {
    type: SET_LOGIN_ERROR,
    loginError
  }
}

function callLoginApi(username, password, callback) {
  setTimeout(() => {

    if (username === logindetls.username && password === logindetls.password)
        {
        return alert("Successfully Logged in...");

    } else {
      return alert('Invalid username and password');
    }
  }, 1000);
}


export default function reducer(state = {
  isLoginSuccess: false,
  isLoginPending: false,
  loginError: null
}, action) {
  switch (action.type) {
    case SET_LOGIN_PENDING:
      return Object.assign({}, state, {
        isLoginPending: action.isLoginPending
      });

    case SET_LOGIN_SUCCESS:
      return Object.assign({}, state, {
        isLoginSuccess: action.isLoginSuccess
      });

    case SET_LOGIN_ERROR:
      return Object.assign({}, state, {
        loginError: action.loginError
      });

    default:
      return state;
  }
}

然后將重定向頁面（userpage.js）添加到routes.js頁面

class Routes extends Component {

   render() {
      return (
        <div>
       <Router> 
        <Switch>
            <Route exact path="/" component={HomePage}/>
            <Route path="/about" component={About}/>
            <Route path="/loginform" component={LoginForm}/>
            <Route path="/companies" component={Companies}/>
            <Route path="/services" component={Services}/>
            <Route path="/contact" component={Contact}/>
            <Route path="/userpage" component={UserPage}/>
        </Switch>
      </Router>

    </div>
      );
  }
}

我需要在哪里添加路由代碼，什么需要導入？ 是否需要安裝react-router？ React-router-dom是否沒有要推送的屬性？在我的代碼中，我將在哪里添加此路由功能？

Answer 1

import { withRouter } from 'react-router-dom'
class LoginForm extends Component {
  componentWillReceiveProps(nextProps) {
    if (!nextProps.isLoginPending && this.props.isLoginPending) {
      if (nextProps.isLoginSuccess) {
         this.props.history.push('/path-to-redirect-on-login')
      } else {
        console.log(this.props.loginError)
      }
    }
  }
  render() {
    ...
  }
}
...
LoginForm = withRouter(LoginForm);

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);