javascript - React ルーター 3.x は、フロー外のページへのアクセスを制限します

Question

ユーザーが最終的な支払いページに到達するために複数のルートを通過する必要がある購入フローを作成しています。たとえば、1 番目のルートで住所情報を入力し、2 番目のルートで購入の選択を構成し、3 番目のページでクレジット カード情報を入力するなど、合計で約 5 ～ 6 ページあります。 /ルート。最初のページを通過していない人が 2 番目のページにアクセスできないように、ルーターに制限を実装するにはどうすればよいですか?

React Router 3.x、React router redux 4.x、および React Boilerpate hereを使用しています。React ルーターが提供する機能の使用について読みましonEnterたが、特に React Boilerplate と組み合わせて、それを配置する場所に関する具体的な例や、私がやろうとしていることの実行に関する特定のドキュメントが見つかりません。

これに関するアイデア/ガイダンス/リソースはありますか?

参考までに、私のルート ファイルは次のようになります (ほとんど定型文のデフォルトのルート ファイルです)。

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);
      },
    },
  ];
}