Question

示例我使用React Router PlainRoute

定义我的应用程序的路线

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : Home,
  childRoutes : [
    CounterRoute(store),
  ]
});

CoreLayout作为我整个应用程序的基本样式（页眉，页脚，...）：

export const CoreLayout = ({ children }) => (
  <div className='container text-center'>
    <Header />
    <div className='core-layout__viewport'>
      {children}
    </div>
  </div>
);
export default CoreLayout;

我的问题是：如何定义路线以便：

路线A不使用CoreLayout。（这种情况下，路线A是登录屏幕）。
路线B，路线C ......始终嵌套在CoreLayout内。

感谢

Answer 1

为了在另一个组件内呈现一些组件，例如在你的CoreLayout with react-router中，只要让它们成为指向你CoreLayout的路线的子路线。不在CoreLayout的子路线中的其他组件不会在其中呈现。然后在你的createRoutes函数返回路由数组中。这可能是您的解决方案。

export const createRoutes = (store) => ([
  {
    path: '/',
    component: CoreLayout,
    indexRoute: Home,
    childRoutes: [
        CounterRoute(store),
    ]
  },
  {
     path: '/login',
     component: YourLoginComponent
  }
]);

React Router：使用PlainRoute定义路由

1 个答案: