无法在 React Router v5 上打印嵌套路由的子组件

Question

我似乎不知道如何在React Router v5中打印子路由。以下是我如何设置我的应用程序。

1( index.jsx

ReactDOM.render(
<Provider store={store}>
<IntlProvider defaultLocale="en" locale="en" messages={messages}>
<ThemeProvider theme={theme}>
{Routes()}
</ThemeProvider>
</IntlProvider>
</Provider>,
root,

)；

2( Routes.jsx

export default function Routes() {
return (
<ConnectedRouter history={history}>
<Switch>
<Route path="/welcome" component={App} />
<Route component={UnknownPage} />
</Switch>
</ConnectedRouter>
);
}

3( App.jsx

const App = ({ location }) => (
<div>
<DialogMount />
<RefreshSession />
<Masthead />
<Navigation />
<PageWrapper>
<NavTabs location={location} />
<ContentWrapper>
<Alert />
<Switch>
{generateRoutes(routesConfig)}
</Switch>
</ContentWrapper>
</PageWrapper>
</div>
);

4( 生成路线方法

export const generateRoutes = (routes = []) => Object.values(routes).map((route) => {
if (route.redirect) {
return [];
} else if (route.children) {
return (
<Route key={route.path} path={route.path}>
<Switch>
{generateRoutes(route.children)}
</Switch>
</Route>
);
}
return <Route key={route.path} path={route.path} component={route.component} />;
}).reduce((navigation, route) => navigation.concat(route), []);

5( 路线配置

const routesConfig = {
parent: {
path: 'parent',
name: 'parent',
children: {
child1: {
path: 'child1',
name: 'child1',
component: Child1,
},
},
},
};

问题是，从我的App.jsx中，直到NavTabs被渲染之前，一切都是如此。只是它的路由部分没有被渲染。我知道我在这里错过了一些非常愚蠢的东西，但似乎不明白。

感谢您的帮助。

在Shubham回答后编辑：

我做出了改变，但仍然面临着同样的问题。然而，不是

render={props => <route.component {...props} />}

我使用

CCD_ 2。

这似乎是加载组件，但现在我看到错误如下：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Licensing`.
at createFiberFromTypeAndProps (react-dom.development.js:23965)
at createFiberFromElement (react-dom.development.js:23988)
at createChild (react-dom.development.js:13628)
at reconcileChildrenArray (react-dom.development.js:13900)
at reconcileChildFibers (react-dom.development.js:14305)
at reconcileChildren (react-dom.development.js:16762)
at updateHostComponent (react-dom.development.js:17302)
at beginWork (react-dom.development.js:18627)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)

Answer 1

之所以会出现此问题，是因为除非您在渲染组件本身中指定嵌套路由，否则您需要为其提供整个路径名。

解决方案是在路径名之前传递一个要附加的前缀。我们还需要一个尾随的/

const generateRoutes = (routes = [], prefix = "") =>
Object.values(routes)
.map(route => {
console.log(prefix);
if (route.redirect) {
return [];
} else if (route.children) {
return (
<Route key={route.path} path={`${prefix}/${route.path}`}>
<Switch>
{generateRoutes(route.children, prefix + "/" + route.path)}
</Switch>
</Route>
);
}
return (
<Route
path={`${prefix}/${route.path}`}
key={route.path}
render={props => <route.component {...props} />}
/>
);
})
.reduce((navigation, route) => navigation.concat(route), []);

工作演示