如何在 React 中使用 history.push 導航

Question

我可以將我的組件名稱添加到：例如： this.props.history.push(<Sample/>)

我有一個關於在此添加路徑的想法： this.props.history.push("/Sample") 。

或者如何將其導航到我的組件：

.catch((error) => {
    console.log("error", error);
    this.setState({
        finishedStep: false,
    });
    this.props.history.push("<Sample/>");
});

如果完成的步驟是false ，我想將它導航到我的<Sample>組件。

Answer 1

假設您已經為<Sample />組件配置了相應的路由。

用react-router-dom包裝你的組件

安裝 - react-router-dom

npm install --save react-router-dom

例子：

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

class YourComponent extends React.Component {
   handleSubmit = (user) => {
     saveUser(user).then(() =>
     this.props.history.push('/dashboard')
     )).catch((error) => {
      console.log("error", error);
      this.setState({
        finishedStep: false,
      });
      this.props.history.push("/Sample");
     })
   }      
   render() {
    return (
      <div>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

export default withRouter(YourComponent)

您可以在不使用react-router-dom的情況下采取的另一種方法是。

render() {
    if (this.state.finishedStep === false) {
      return <Redirect to='/Sample' />
    }

    return (
      <div>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }