亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法在 React Router v5 上打印嵌套路由的子組件

無法在 React Router v5 上打印嵌套路由的子組件

慕婉清6462132 2022-07-21 09:52:25
我似乎無法弄清楚如何在 React Router v5 中打印子路由。這是我設置應用程序的方式。1) index.jsxReactDOM.render(<Provider store={store}>  <IntlProvider defaultLocale="en" locale="en" messages={messages}>    <ThemeProvider theme={theme}>      {Routes()}    </ThemeProvider>  </IntlProvider></Provider>,root,);2) 路由.jsxexport default function Routes() {  return (    <ConnectedRouter history={history}>      <Switch>        <Route path="/welcome" component={App} />        <Route component={UnknownPage} />      </Switch>   </ConnectedRouter>  );}3) 應用程序.jsxconst 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} />}.
查看完整描述

1 回答

?
守著星空守著你

TA貢獻1799條經驗 獲得超8個贊

問題正在發生,因為除非您在呈現的組件本身中指定嵌套路由,否則您需要為其提供整個路徑名。


解決方案是傳遞前綴以附加在路徑名之前。我們還需要一個尾隨/


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


查看完整回答
反對 回復 2022-07-21
  • 1 回答
  • 0 關注
  • 79 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號