0. 바라는 화면

1) 각 페이지에서 컴포넌트에서 title만 입력하는 header 컴포넌트
2) breadcrumb 사용해서 링크 및 위치 알리고 싶음.

1. HeaderMain.js

import React from "react";
import { makeStyles, Typography } from "@material-ui/core";

import Link from "@mui/material/Link";
import Breadcrumbs from "@mui/material/Breadcrumbs";

const useStyles = makeStyles((theme) => ({
  hr: {
    border: 0,
    background: "#c8c8c8",
    height: "0.5px"
  },
  content: {
    paddingTop: theme.spacing(2)
  },
  typography: {
    paddingRight: theme.spacing(2)
  }
}));

const HeaderMain = (props) => {
  const classes = useStyles();
  const { title } = props;
  const breadcrumbs = [
    <Link underline="hover" key="1" color="inherit" href="/">
      Home
    </Link>,
    <Typography key="3" color="text.primary">
      {title}
    </Typography>
  ];
  return (
    <React.Fragment>
      <div>
        <Typography variant="h2" className={classes.typography}>
          {props.title}
        </Typography>
        <Breadcrumbs separator="›" aria-label="breadcrumb">
          {breadcrumbs}
        </Breadcrumbs>
      </div>
      <div className={classes.content}>
        <hr className={classes.hr} />
      </div>
    </React.Fragment>
  );
};

export { HeaderMain };

2. 각 페이지에서 사용

각 페이지의 return문에서 원하는 위치에서 호출.

        <div className={classes.header}>
          <HeaderMain title="Node's Data" />
        </div>