Question

我有一份登记表。用户填写所有需要的数据，然后点击submit按钮，然后将其重定向到确认页面。

它是一个简单的页面/confirm-account，显示他输入的所有数据，这样他就可以确保他正确地输入了所有内容。

但是，我不希望用户直接从浏览器输入此/confirm-account，但只有在他点击submit按钮后才能输入。如果他刚刚打开浏览器并粘贴此链接并按Enter键，则应将其重定向到/register-account。

我的尝试：（routes.js）

path: 'confirm-account',
  name: 'confirmAccount',
  indexRoute: { onEnter: (nextState, replace) => {
    if (state doesn\'t have something, I dont know yet) {   <-------------- condition
      replace('/register-account')
    } },
  getComponent(nextState, cb) {
    const importModules = Promise.all([
      import('containers/ConfirmAccount'),
    ]);

问：在条件内使用什么？

重要提示：提交时，我使用：

this.props.dispatch(push('/confirm-account'));

我的第一个想法是使用push函数传递一些数据并检查它是否在路由文件中可用。或者，如果用户在register-account组件上，请设置指定的道具并检查它在路线内是否存在？

期待任何提示。谢谢你！

Answer 1

你可以在componentDidMount中测试你的情况，如果它是虚假的重定向：

componentDidMount = () => {
if (!yourCondition) {
  return this.props.history.push({
    pathname: '/register-account'
  });
}

}

其他解决方案可能：

尝试重定向：

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

并在render方法中使用：

if (!yourCondition) { return <Redirect to="/register-account" /> }

如果用户是他访问的第一个组件，则将用户重定向到另一个组件

1 个答案: