在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) generateRoutes方法

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) routesConfig

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

问题是，从我的App.jsx来看，在NavTabs之前的所有内容都在被渲染。只是其中的路由部分没有被渲染。我知道我漏掉了一些非常愚蠢的东西，但似乎想不通。

任何帮助都是感激的。

在Shubham的回答之后进行了编辑。

我做了修改，但仍然面临同样的问题。然而，代替

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

我用的是

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

这似乎是在加载组件，但现在我看到了这样的错误。

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

工作演示