[ React ] PJ. Props Childrenを使用してレイアウト構造を改善

無人値守精品サイトのタイトルの下部の内容は、固定された幅値内で、asideタブと各ページの内容のレンダリング方式で作成されています.
そこで我々荒れ果てたチームも同様に固定width値内で内容の企画を行った.
このため、asideと各ページの内容を収容し、常にcontainerのレイアウトで同じ位置でレンダリングするcontainerが必要です.
ただし、各ページコンポーネントにasideを配置する場合、ルータコンポーネントでルーティングする際には、ページにかかわらず、asideが不要に再レンダリングされることを考慮し、低効率を示す必要があります.
したがって,ルータコンポーネント内でdivタグを用いてasideコンポーネントと各ページコンポーネントを囲むのが一般的である.scssでレイアウトを行います.

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <div className="mainContainer">
        <Aside />
        <Routes>
          <Route path="/cart" element={<Cart />} />
          <Route path="/detail/:id" element={<Detail />} />
          <Route path="products/categories" element={<List />} />
          <Route path="products/categories/:id/types" element={<Gender />} />
          <Route path="/" element={<Landing />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

でも、

ルータ構成部品には、構成部品以外の要素が含まれており、共通です.scssでレイアウトされた構造が悪いと考えられ,子供たちによってルータの構造が以下のように改善された.

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <MainContainer>
        <Aside />
        <ContentsWrapper>
          <Routes>
            <Route path="/cart" element={<Cart />} />
            <Route path="/detail/:id" element={<Detail />} />
            <Route path="products/categories" element={<List />} />
            <Route path="products/categories/:id/types" element={<Gender />} />
            <Route path="/" element={<Landing />} />
          </Routes>
        </ContentsWrapper>
      </MainContainer>
    </BrowserRouter>
  );
};

asideおよびページコンテンツがレンダリングされる幅値と、レイアウトが適用されるMainContainerおよびaside領域以外の幅値のContentsWrapperエレメントとを使用して、各ページエレメントをサブアイテムとしてasideおよび入力します.
以下の構造変更により、ルータ自体にレイアウトを適用することなく、構成部品を自由に配置できるようになりました.