目的 自分が読んだreactの最近の参考書にはreact-routerの使い方の説明が一切書かれていなかったため、公式ドキュメントを参考にして備忘録として使い方を記す。 実践 index.jsx(ts使うならtsx)に下記のように記載する。 各コンポーネント、ファイルの置き場所をsrc/routes,src/components配下としたが、これは特に定められているわけではないので場合によってはもっとネストさせたディレクトリの下などから呼ぶこともあるだろう。 index.jsx 結局index.jsxを"root"にレンダリングするため、全てのRouteをindex.jsxに記載する。 HeaderやFooterなどの固定するものはどこのページでも表示するため、内外に記載する。 <Route path="/" element={<Home />} />では、URLを例えばhttp://lo
![爆速で説明するreact-routerの使い方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/21f41353b7ba84f694d7130041115b799df89e81/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU3JTg4JTg2JUU5JTgwJTlGJUUzJTgxJUE3JUU4JUFBJUFDJUU2JTk4JThFJUUzJTgxJTk5JUUzJTgyJThCcmVhY3Qtcm91dGVyJUUzJTgxJUFFJUU0JUJEJUJGJUUzJTgxJTg0JUU2JTk2JUI5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hMTk4YWZjODcxM2UzYjA4NjNlYzBhZjE0NDQ5Y2YyYg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQweXV0b3VuJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hOGVlMWI1ODcyNWM5ZjdmNGQxNjZjOTgzYmFmM2NlNw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da597594d8ec814eb3728edf21488c954)