问题描述
作为参考,我使用的是 React-Redux Starter Kit (https://github.com/davezuko/react-redux-starter-kit) 作为基础项目布局.
For reference, I am using the React-Redux Starter Kit (https://github.com/davezuko/react-redux-starter-kit) as a base project layout.
我有一个名为 TSP
的路由,我正在使用 getComponent
和 redux connect()
在容器组件上注入一个 reducer,我希望它会在道具中传递 children
.
Ive got a route named TSP
, and I am using getComponent
and redux connect()
to inject a reducer on a container component, which i am hoping will pass children
on in the props.
永远不会调用 TSP 路由定义中的 getChildRoutes
.
The getChildRoutes
in the TSP route definition is never being called.
根路由器配置:
import ApplicationLayout from '../layouts/ApplicationLayout';
import Home from './Home';
export const createRoutes = (store) => {
const routes = {
path: '/',
component: ApplicationLayout,
indexRoute: Home,
getChildRoutes (location, next) {
require.ensure([], (require) => {
next(null, [
require('./TSP').default(store),
require('./Home').default,
]);
});
}
};
return routes;
};
export default createRoutes;
嵌套路由器配置 (TSP):
Nested Router Config (TSP):
import { injectReducer } from '../../store/reducers';
import Overview from './routes/Overview';
export default (store) => ({
path: '/tsp/:id',
indexRoute: Overview,
getComponent (nextState, next) {
require.ensure([
'./containers/TSPContainer',
'./modules/tsp'
], (require) => {
const TSP = require('./containers/TSPContainer').default;
const reducer = require('./modules/tsp').default;
injectReducer(store, { key: 'tsp', reducer });
next(null, TSP);
});
},
getChildRoutes (location, next) {
debugger
require.ensure([], (require) => {
next(null, [
// Provide store for async reducers and middleware
require('./routes/Offers').default(store),
require('./routes/Reviews').default(store)
]);
});
}
});
我从来没有进入 getChildRoutes
中的 debugger
.
I am never getting to the debugger
within getChildRoutes
.
感谢任何帮助,如果有更多文件需要查看,我可以添加它们.
Any help is appreciated, and if there are any more files necessary to see I can add them.
推荐答案
想通了.我在上面的 TSP
嵌套路由器配置中的 IndexRoute
是一个函数,而不是一个对象(我假设 react-router 在触发 getChildRoutes
.)
Figured it out. My IndexRoute
in the above TSP
nested router config was a function, not an object (which i'm assuming react-router was expecting indexRoute to be an object before firing getChildRoutes
.)
解决方案是将解析后的 Overview
的 routeConfig 分配给 indexRoute
.
The solution was to assign the resolved the routeConfig for Overview
to indexRoute
.
TSP/index.js
import { injectReducer } from '../../store/reducers';
export default (store) => ({
path: '/tsp/:id',
indexRoute: require('./routes/Overview').default(store),
getComponent (nextState, next) {
require.ensure([
'./containers/TSPContainer',
'./modules/tsp'
], (require) => {
const TSP = require('./containers/TSPContainer').default;
const reducer = require('./modules/tsp').default;
injectReducer(store, { key: 'tsp', reducer });
next(null, TSP);
});
},
getChildRoutes (location, next) {
require.ensure([], (require) => {
next(null, [
// Provide store for async reducers and middleware
require('./routes/Offers').default(store),
require('./routes/Reviews').default(store)
]);
});
}
});
TSP/routes/Overview/index.js
export default (store) => ({
getComponent (nextState, next) {
require.ensure([
'./components/OverviewView'
], (require) => {
const Overview = require('./components/OverviewView').default;
next(null, Overview);
});
}
});
这篇关于React-router:getChildRoutes 不会在嵌套的 PlainRoute 中触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!