2

我正在制作一个购买流程，用户必须通过多条路线才能到达最终付款页面。例如，在第一条路线上您输入邮寄地址信息，在第二条路线上您正在配置您的购买选择，第三页您正在输入信用卡信息等。总共大约 5-6 页/路线。我将如何对路由器实施限制，以使没有通过第一页的人无法访问第二页？

我在这里使用 React Router 3.x、React router redux 4.x 以及 React Boilerpate。我阅读了有关使用onEnterReact 路由器提供的功能的信息，但我找不到任何关于放置该功能的具体示例，也找不到任何具体的文档来执行我正在尝试做的事情，尤其是与 React 样板结合使用。

有没有人对此有任何想法/指导/资源？

作为参考，我的路由文件看起来像这样（几乎是样板文件中的默认路由文件） -

import { getAsyncInjectors } from 'utils/asyncInjectors';

const errorLoading = (err) => {
  console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
};

const loadModule = (cb) => (componentModule) => {
  cb(null, componentModule.default);
};

export default function createRoutes(store) {
  // Create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars

  return [
    {
      path: '/paymentsPage/billing',
      name: 'billing',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Billing'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
    {
      path: '/paymentsPage/orgs',
      name: 'orgs',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Organization/reducer'),
          import('containers/Organization'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('orgs', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/paymentsPage/amount',
      name: 'amount',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Donation/reducer'),
          import('containers/Donation'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('amount', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/paymentsPage/finalPayment',
      name: 'finalPayment',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/FinalPayment/reducer'),
          import('containers/FinalPayment'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('finalPayment', reducer.ccInfoReducer);
          injectReducer('finalPayment', reducer.paymentReducer);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/paymentsPage/confirmation',
      name: 'confirmation',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Confirmation/reducer'),
          import('containers/Confirmation'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('confirmation', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '*',
      name: 'notfound',
      getComponent(nextState, cb) {
        import('containers/NotFoundPage')
          .then(loadModule(cb))
          .catch(errorLoading);
      },
    },
  ];
}
4

1 回答 1

0

从技术上讲，它是 javascript，因此用户只需稍加操作即可访问任何路线。如果您只想鼓励用户遵循某组路线，则可以使用重定向。例如，您可以在组件挂载之前检查您的状态中的标志，如果未正确设置，则重定向到您认为用户应该使用的路由。

如果您曾经使用过热重载功能，则更极端的解决方案可能是以类似于 webpack 的开发服务器（和其他构建工具）的工作方式从服务器动态加载反应组件的方式（免责声明：我从未尝试过这样我不确定它的效果如何）。这将允许您对用户可用的路线进行一些区分。这篇文章（还有其他文章）粗略地概述了这种技术的工作原理。

于 2017-05-03T02:49:01.550 回答