具有Redux多個組件的React路由器

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>

• 在這里，我想在此布局之前調用登錄組件，並在用戶單擊登錄時調用登錄組件，然后應進入此布局。 此布局組件包含各種路由，並且具有一些常用組件，例如標題側邊欄rightsidebar {7到8條路由的布局路由}頁腳，因此此處所有組件都使用公共標題側邊欄rightsidebar和footer進行渲染，但只有登錄組件不包含所有常用的header ..如上所述，因此要求首先加載登錄組件，然后單擊登錄，應從路由指定的布局中渲染組件。

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>

)

SomeSubpage

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

希望對您有幫助！祝您好運！