Reactjs React/Redux：如何仅允许用户在完成上一页的基础上进入下一页？

我的网页上有两页。我希望在用户完成第一页之前禁用submit按钮

按钮被禁用；但是，如果我尝试使用链接访问第二页，按钮将启用，我可以访问第二页

---

有什么建议吗？

您可以使用“反应状态”禁用按钮

export class Form extends React.Component {
  state = {
    disableSubmit: true,
  }
  render() {
    return (<button disabled={this.state.disableSubmit}>Submit</button>);
  }
}

导出类表单扩展React.Component{
状态={
disableSubmit:正确，
}
render（）{
返回（提交）；
}
}

若要禁用链接，可以应用类。在这里检查

导出类表单扩展React.Component{
状态={
disableSubmit:正确，
}
render（）{
返回（链接）；
}
}

如果您希望用户在没有完成第一页上的某些任务的情况下无法访问第二页，您可以

• 在redux状态下设置一个键，该键仅在用户完成任务时设置，然后仅在设置该键后呈现第二页。就是说,

{this.props.taskCompleted==true&&}

• 如果您使用的是react路由器，您可以创建一种受保护的路由，如

const privaterote=（道具：any）=>{
const{component:component，auth，…rest}=props；
const renderComponent=（道具：任意）=>{
如果（身份验证已完成）{
回来
}否则{
回来
}
};
回来
};
常量mapStateToProps=（状态：任意）=>({
auth:state.auth，
});
导出默认连接(
MapStateTops，
无效的
无效的
{pure:false}，
)（私人航线）；

然后像这样使用

<PrivateRoute path="/second" component={SecondPage} />

---

---

但是请记住，这些方法都不能让人确定，因为纯粹的前端身份验证永远都不安全。您应该将其设置为仅从后端服务器发送第二页的数据，并且仅在后端设置了特定密钥时发送数据。

您好，我感谢您的回答！！你能帮我进一步理解吗？@Ishawa当然，你不理解哪部分？

{this.props.taskCompleted === true && <SecondPage />}

const PrivateRoute = (props: any) => {
  const { component: Component, auth, ...rest } = props;
  const renderComponent = (props: any) => {
    if (auth.isTaskCompleted) {
      return <Component {...props} />;
    } else {
      return <Redirect to={'auth'} />;
    }
  };
  return <Route {...rest} render={renderComponent} />;
};

const mapStateToProps = (state: any) => ({
  auth: state.auth,
});

export default connect(
  mapStateToProps,
  null,
  null,
  { pure: false },
)(PrivateRoute);

<PrivateRoute path="/second" component={SecondPage} />