• react-router
• tanstack-router
  • https://tanstack.com/router/latest
• wouter
  • https://github.com/molefrog/wouter

1. wouterをインストール

   npm i wouter 
   

2. App.tsx の中身を src/pages/Index.tsx として切り出す

3. 新しいページを作成する src/pages/Todos.tsx

4. App.tsx にルートを追加し、ルートを切り替えるとカウンターがリセットされることを確認する

    <div className="navbar flex justify-around w-full">
      <Link className="btn btn-ghost" href="/">
        Home
      </Link>
      <Link className="btn btn-ghost" href="/todos">
        Todos
      </Link>
    </div>
    <Switch>
      <Route path="/" component={Index} />
      <Route path="/todos" component={Todos} />
    </Switch>
   

5. pages/NotFound.jsx ページを追加し、ページが見つからなかったときのルートとして設定する

<aside> 💡

チャプター完了時点のソースコード

https://github.com/craftgear/react-hands-on/tree/ch5

</aside>