2
최종 구매 페이지로 이동하려면 여러 경로를 거쳐야하는 구매 흐름을 만들고 있습니다. 예를 들어, 첫 번째 경로에는 우편 주소 정보를 입력하고, 두 번째 경로에는 구매 선택 항목, 세 번째 페이지에는 신용 카드 정보 등을 입력합니다. 총 약 5-6 페이지가 있습니다/routes. 라우터에 대한 제한 사항을 구현하여 첫 번째 페이지를 통과하지 못한 사람들이 두 번째 페이지에 액세스하지 못하게하려면 어떻게해야합니까?React Router 3.x는 흐름 외부의 페이지에 대한 액세스를 제한합니다.
저는 React Router 3.x, React 라우터 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);
},
},
];
}