Question

Following are the details for code snippet. 

<Provider store={store}> 
<MuiThemeProvider theme={customTheme}> 
<Loader /> 
<Router> 
<Switch> 
<Route path="/" component={Layout} /> 
</Switch> 
</Router> 
</MuiThemeProvider> 
</Provider>

在这里，我想在此版式之前调用登录组件并进入用户单击登录名时的登录组件，则应进入此组件布局。此布局组件包含各种路线，并且具有一些常见组件，例如标头侧边栏右侧栏 {7至8条路线的布局路线} 页脚所以这里所有组件都使用公共标题侧栏右侧栏渲染和页脚，但仅登录组件不包含所有通用标头..如上所述，因此要求首先加载登录组件，然后单击登录应呈现路线指定的布局中的组件。

Answer 1

您无法制作页面以扩展布局组件吗？在这种情况下，登录组件将渲染布局组件并通过props操纵标题组件的显示。您可以将默认props设置为布局以匹配您的大多数子页面

布局

const Layout = props => (

  <div className="layout-container">

   {props.displayCommonHeader && <CommonHeaderComponent />}

   {props.children}

  </div>

)

登录

const Login = props => (

  <Layout displayCommonHeader={false}>
   <MyCustomLoginFormComponent />
  </Layout>

)

某些子页面

const SomeSubpage = props => (
 <Layout displayCommonHeader={true}>
  Custom Stuff
 </Layout>
)

希望对您有帮助！祝您好运！

具有Redux多个组件的React路由器

1 个答案: