Не удается напечатать дочерние компоненты вложенных маршрутов в React Router v5 - PullRequest
Новая
       73

Не удается напечатать дочерние компоненты вложенных маршрутов в React Router v5

2 голосов
/ 28 апреля 2020

Не могу понять, как напечатать дочерние маршруты в 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) routConfig 

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

Проблема в том, что из моего App.jsx все, пока NavTabs не рендерится. Просто перенаправленная часть не отображается. Я знаю, что упускаю что-то очень глупое, но не могу понять.

Любая помощь приветствуется.

Редактировать после ответа Шубхам:

Я внес изменения, но все еще столкнулся с той же проблемой. Однако вместо

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)

1 Ответ

1 голос
/ 28 апреля 2020

Проблема возникает из-за того, что если вы не укажете вложенные маршруты в самом отображаемом компоненте, вам нужно будет указать полный путь к нему.

Решение состоит в том, чтобы передать префикс для добавления перед именем пути. Также нам нужен трейлинг /

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

Рабочая ДЕМО

...