React-Router-Domが上手く動作しない

Question

#概要
下記のような構成でRouterを作っています。

const Router = () => {
  return (
    <LoginContextProvider>
      <BrowserRouter>
        <DefaultPageTemplate>
          <Route exact={true} path="/" component={Top} />
          <Route path="/productlist" component={ProductList} />
          <Route path="/terms" component={Terms} />
          <Route path="/application" component={Application} />
          <Route path="/page1" component={Page1} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />
          <Route path="/forgotpw" component={ForgotPW} />
        </DefaultPageTemplate>
        <AuthComponent>
            <Route path="/CheckAccount/:param?" component={CheckAccount} />
            <CustomerPageTemplate>
              <Route path="/dashboard" component={DashBoard} />
              <Route path="/products/:brandkey?" component={Products} />
              <Route path="/transactions" component={Transactions} />
              <Route path="/accounts" component={Accounts} />
              <Route path="/accounts_bank" component={AccountsBank} />
              <Route path="/accounts_email" component={AccountsEmail} />
              <Route path="/accounts_pw" component={AccountsPassword} />
            </CustomerPageTemplate>
        </AuthComponent>

        {/* Not Found */}
        <Route component={() => <Redirect to="/" />} />
    </BrowserRouter>
    </LoginContextProvider>
    )
};

問題点

/dashboardにアクセスした場合、本来であればCustomerPageTemplateのコンテンツ部分にdashboardのコンテンツが表示されるのですが、DefaultPageTemplateのComponentで描画され、コンテンツ部分は真っ白になってしまいます。

Routerの書き方に問題があると思うのですが、アドバイス頂けないえでしょうか？

Answer 1

CustomerPageTemplate内で子要素を表示していないのではないでしょうか。
CustomerPageTemplateでJSXをreturnするときに、childrenを出力してみてください。

CustomerPageTemplateがReact.componentの時：this.props.children
CustomerPageTemplateがReact.SFCの時：props.children