AppGram 
今回は、reactのルーティングについて！
react-router-domがv６というバージョンに変更されたこともあって、少々手こずりましたw
教材でもv６に更新された内容は少なかったので、紹介しようと思います！
ディレクトリ構成
ディレクトリ構成はこのようになっています！
（node_modulesなど、今回の紹介に必要ない部分は省略しています。）
├──────├── App.js #ルーティングの処理を書く部分
├── Components
│ ├── Navbar.jsx
│ ├── idea #エンドポイント：/ideaのコンポーネント
│ │ ├── GenerateIdea.jsx
│ │ ├── Idea.jsx
│ │ ├── IdeaList.jsx
│ │ └── ideaDetail
│ │ └── IdeaDetail.jsx
│ ├── user #認証機能関係のコンポーネント
│ │ ├── Login.jsx
│ │ └── Register.jsx
│ └── word #エンドポイント：/wordのコンポーネント
│ ├── AddForm.jsx
│ ├── Word.jsx │ └── WordsLlist.jsx
├── index.css
└── index.jsソースコード
index.js↓
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App/>
, document.getElementById('root'));App.js↓
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// それぞれのエンドポイントのコンポーネント
import Idea from "./Components/idea/Idea";
import IdeaDetail from "./Components/idea/ideaDetail/IdeaDetail";
import Word from "./Components/word/Word";
//全てのエンドポイントにて表示するナビゲーションバー
import Navigationbar from "./Components/Navbar";
const App = () => {
return (
<BrowserRouter>
<Navigationbar />
<Routes>
<Route path="/idea" exact element={<Idea />} />
<Route path="/idea/:id" exact element={<IdeaDetail />} />
<Route path="/word" exact element={<Word />} />
</Routes>
</BrowserRouter>
);
};
export default App;気をつける点としては
属性名はcomponentではなく、elementを指定する
<Route path="/idea" exact component={<Idea />} /> component❌
<Route path="/idea" exact element={<Idea />} /> element⭕️属性には表示するコンポーネントを指定していく訳ですが、componentではなく、elementを使いましょう。
componentタグの属性値はタグで囲む
<Route path="/idea" exact element={Idea} /> Idea❌
<Route path="/idea" exact element={<Idea />} /> <Idea />⭕️表示するコンポーネントはしっかりタグで囲みましょう！
