React Routerの導入

$ npm install react-router-dom

+import { BrowserRouter } from "react-router-dom";
 --省略--
root.render(
  <React.StrictMode>
+    <BrowserRouter>
      <App />
+    </BrowserRouter>
  </React.StrictMode>
);

+import { Routes,Route } from "react-router-dom"
+import { ExhibitionList } from './components/ExhibitionList';
+import { MuseumList } from './components/MuseumList';
+import { Home } from './components/Home';

export const App=()=> {
  return (
    <div className="App">
+      <Routes>
+        <Route path="/" element={<Home />}/>
+        <Route path="museums" element={<MuseumList />}/>
+        <Route path="exhibitions" element={<ExhibitionList />}/>
+      </Routes>
    </div>
  );
};

export const ExhibitionList=()=> {
  return(
    <div>
      ExhibitionList
    </div>
  );
};

type PageType = {
  title: string,
  path: string,
}
const pages: PageType[] = [
  {
    title: 'ホーム',
    path: '/',
  },
  {
    title: '美術館',
    path: '/museums',
  },
  {
    title:'展覧会',
    path:'/exhibitions'
  }
];

<Box>
    {pages.map((page) => (  
    <Link href={page.path}>{page.title}</Link>
    ))}
</Box>