无法在 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) 路由.jsx

export default function Routes() {

  return (

    <ConnectedRouter history={history}>

      <Switch>

        <Route path="/welcome" component={App} />

        <Route component={UnknownPage} />

      </Switch>

   </ConnectedRouter>

  );

}

3) 应用程序.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) 路由配置

const routesConfig = {

  parent: {

    path: 'parent',

    name: 'parent',

    children: {

      child1: {

        path: 'child1',

        name: 'child1',

        component: Child1,

      },

    },

  },

};

问题是，从我的 App.jsx 开始，直到呈现 NavTab 之前的所有内容。只是它的路由部分没有被渲染。我知道我在这里遗漏了一些非常愚蠢的东西，但似乎无法弄清楚。

任何帮助表示赞赏。

在 Shubham 的回答之后编辑：

我进行了更改，但仍然面临同样的问题。然而，而不是

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

我用了

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

Answer 1

问题正在发生，因为除非您在呈现的组件本身中指定嵌套路由，否则您需要为其提供整个路径名。解决方案是传递前缀以附加在路径名之前。我们还需要一个尾随/const generateRoutes = (routes = [], prefix = "") =>&nbsp; Object.values(routes)&nbsp; &nbsp; .map(route => {&nbsp; &nbsp; &nbsp; console.log(prefix);&nbsp; &nbsp; &nbsp; if (route.redirect) {&nbsp; &nbsp; &nbsp; &nbsp; return [];&nbsp; &nbsp; &nbsp; } else if (route.children) {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route key={route.path} path={`${prefix}/${route.path}`}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {generateRoutes(route.children, prefix + "/" + route.path)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Route>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path={`${prefix}/${route.path}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={route.path}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render={props => <route.component {...props} />}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; })&nbsp; &nbsp; .reduce((navigation, route) => navigation.concat(route), []);