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

debugcn 发表于 Dev

维诺德·巴夫纳尼（Vinod Bhavnani）

我似乎无法弄清楚如何在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)

Shubham Khatri

之所以发生此问题，是因为除非您在呈现的组件本身中指定嵌套路由，否则您需要为其提供完整的路径名。

解决方案是在路径名之前传递前缀以追加。我们也需要尾随/

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

工作演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。