React ルーティングの作成

React

2022.12.12 2022.09.01

TodoListをUdemyで作成したので、その機能を拡張する。

具体的には、「100均」「スーパーマーケット」「ドラッグストア」の３つ分けてそれぞれを別のURLで表示させる。

pagesの作成
ルーティングの設定

pagesの作成

src/componets/pageを作成する。その中に、Supermarket.jsxHndredStore.jsxDrugstore.jsxを作成する。

ルーティングの設定

App.jsxへ下記を実装する。

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <AuthProvider>
          <Header />
          <Dashboard />
          <Footer />
        </AuthProvider>
      </BrowserRouter>
    </div>
  );
}