リテラルと型とルーティングとレイアウトで別ファイルに構築。

凶と出るか吉と出るか。。。汗

フロントエンド

１．基幹レイアウトを複数のコンポーネントで構成。

Outletのところにrouter.tsxのchildrenで指定したelementが入ります。

import { Outlet } from "react-router-dom";
import Head from './components/templates/Head';
import Header from "./components/templates/Header";
import Footer from "./components/templates/Footer";
import type { ContentProps } from './types/props.ts';
function App({ head, header, footer } : ContentProps) {
  return (
    <>
      <Head { ...head } />
      <Header {...header}/>
      <Outlet />
      <Footer {...footer} />
    </>
  )
}

export default App

これ、、実際はもっとpropsが複雑になっちゃってます。後で楽をするにはpropsで苦労しなくては。。。

２．ルーティングをrouter.tsxで管理する。

App.tsxを基幹レイアウトにしてchldrenで差分をコンポーネントで補っています。

import { createBrowserRouter } from 'react-router-dom';
import App from './App';
import Index from './components/Index';
import Home from './components/Home';
import { HEADS, HEADER, FOOTER } from "./contants/contants";

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App head={ HEADS.index} header={ HEADER }footer={ FOOTER } />,
    children: [
      { path: '', element: <Index /> },
    ],
  },
  {
    path: '/home',
    element: <App head={ HEADS.home } header={ HEADER } footer={ FOOTER } />,
    children: [
      { path: '', element: <Home /> },
    ],
  }
]);

３．propsの型をtypes/props.tsで管理する。

各コンポーネントのpropsの型を指定しています。

export type HeadProps = {
  title: string;
  description: string;
};

export type HeaderProps = {
  siteName: string;
};

export type FooterProps = {
  copyright: string;
};

export type ContentProps = {
  Head: HeadProps;
  Header: HeaderProps;
  Footer: FooterProps;
};

４．静的リテラルをconstants/contans.tsで管理する。

静的リテラルを定数にする例。

export const HEADS = {
    index: {
        title: '',
        description: '説明文'
    },
    home: {
        title: 'HOME',
        description: '説明文'
    }

} as const;

export const HEADER = {
    siteName: 'サイト名'
} as const;

export const FOOTER = {
    copyright: 'コピーライト'
} as const;

でもこれだと、、HTMLの記述ができませんでした。

どうすっかなぁ。。。

ここに載せているのは実装したものの名前を変えて、、単純化したものです。

実際のコードはもっと複雑。。。特にpropsの型指定でうんうん言ってます。。。