🐅

React Routerの導入

2022/05/08に公開

React

tech

参照

Reactハンズオンラーニング第2版　p601〜

ページの階層構造を作成

公式ドキュメント

create-react-appしたプロジェクト内でインストール

$ npm install react-router-dom

ファイルの変更内容↓

index.tsx
BrowserRouter入れる

index.tsx

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

App.tsx

+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>
  );
};

componentsファイルにコンポーネント作成

ExhibitionList.tsx

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

表示するファイルで配列定義

ResponsiveAppBar.tsx

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

ResponsiveAppBar.tsx

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

参照

ページの階層構造を作成

公式ドキュメント

ファイルの変更内容↓

表示するファイルで配列定義

Discussion