前提・実現したいこと
リストのリンクをクリックすればコンポーネントを切り替えることはできたが、あるベースのコンポーネントを基準にルーティングさせる方法がわかりません。
例えば以下のURLにおいて、Homeコンポーネント内のボタンに対してaboutやusersコンポーネントにページ全体を切り替えたい場合にはどのようにすればいいのでしょうか。
参考
https://reactrouter.com/web/guides/quick-start
該当のソースコード
import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; export default function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Switch> <Route path="/about"> <About /> //Homeのクリックボタンを発火点として切り替えたい </Route> <Route path="/users"> <Users /> //Homeのクリックボタンを発火点として切り替えたい </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); }
あなたの回答
tips
プレビュー