2
私は最終的な支払いページに到達するために複数のルートを通過する必要がある購入フローを作成しています。たとえば、最初のルートでは郵送先住所情報を入力し、2番目のルートでは購入選択を構成し、3番目のページではクレジットカード情報などを入力します。合計で約5-6ページ/ルート。最初のページを通過していない人が2番目のページにアクセスできないように、ルータの制限を実装するにはどうすればいいですか？リアクションルータ3.xはフロー外のページへのアクセスを制限します
私はReact Router 3.x、React Router redux 4.x、およびReact Boilerpate hereを使用しています。私は、リアクタが提供する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);
},
},
];
}