{"id":1183,"date":"2024-05-31T16:13:17","date_gmt":"2024-05-31T07:13:17","guid":{"rendered":"https:\/\/shinke1987.net\/?p=1183"},"modified":"2024-05-31T16:13:18","modified_gmt":"2024-05-31T07:13:18","slug":"laravel-react-router-dom-%e3%81%ae%e7%b0%a1%e6%98%93%e5%8b%95%e4%bd%9c%e7%a2%ba%e8%aa%8d","status":"publish","type":"post","link":"https:\/\/shinke1987.net\/?p=1183","title":{"rendered":"Laravel + react router dom \u306e\u7c21\u6613\u52d5\u4f5c\u78ba\u8a8d"},"content":{"rendered":"\n

\u76ee\u7684<\/h2>\n\n\n\n

\u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u67d4\u8edf\u306b\u53d6\u5f97\u3057\u305f\u3044\u3002<\/p>\n\n\n\n

\u30b3\u30fc\u30c9<\/h2>\n\n\n\n

web.php \u306e\u5185\u5bb9<\/h3>\n\n\n
\n<?php\n\nuse Illuminate\\Support\\Facades\\Route;\n\nRoute::view('\/test1\/{value1?}\/{value2?}', 'test1');\n<\/pre><\/div>\n\n\n
test1.blade.php \u306e\u5185\u5bb9<\/h3>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n\n    <title>test1.blade.php<\/title>\n\n    @vitereactrefresh\n    @vite('resources\/tsx\/entry\/Test1.tsx')\n    @vite('resources\/css\/app.css')\n<\/head>\n\n<body>\n<div>\n    test1.blade.php\n<\/div>\n<div id="root"\/>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Test1.tsx \u306e\u5185\u5bb9<\/h3>\n\n\n
\nimport React from 'react';\nimport ReactDOM, { Container } from 'react-dom\/client';\nimport Component from '..\/Component.tsx';\nimport { createBrowserRouter, RouterProvider } from 'react-router-dom'\n\nconst route = createBrowserRouter([\n                                      {\n                                          path: '\/',\n                                          element: <div>Slash<\/div>,\n                                      },\n                                      {\n                                          path: '\/:value1',\n                                          element: <Component\/>,\n                                      },\n                                      {\n                                          path:'\/:value1\/:value2',\n                                          element: <Component\/>,\n                                      },\n                                  ],\n                                  {\n                                      basename: '\/test1',\n                                  })\n\nReactDOM.createRoot(document.getElementById('root') as Container).render(\n    <React.StrictMode>\n        <div>\n            Test1.tsx\n        <\/div>\n        <hr\/>\n        <RouterProvider router={route}\/>\n    <\/React.StrictMode>,\n);\n<\/pre><\/div>\n\n\n
Component.tsx \u306e\u5185\u5bb9<\/h3>\n\n\n
\nimport { ReactNode } from 'react';\nimport { useParams } from 'react-router-dom'\n\nfunction Component (): ReactNode {\n    const routeParameter = useParams<string>();\n    return (\n        <>\n            <div>\n                Component.tsx\n            <\/div>\n            <div>\n                value1 = {routeParameter.value1}\n            <\/div>\n            <div>\n                value2 = {routeParameter.value2}\n            <\/div>\n        <\/>\n    );\n}\n\nexport default Component;\n<\/pre><\/div>\n\n\n
\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n\n\n\n
\u4e0a\u8a18\u30b3\u30fc\u30c9\u3092\u914d\u7f6e\u3057\u3001\u4e0b\u8a183\u3064\u306e\u30a2\u30c9\u30ec\u30b9\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u826f\u3044\u3002<\/p>\n\n\n\n
    \n
  • https:\/\/\u30c9\u30e1\u30a4\u30f3\/test1\uff08Slash \u3068\u3060\u3051\u8868\u793a\u3055\u308c\u308b\u306f\u305a\uff09<\/li>\n\n\n\n
  • https:\/\/\u30c9\u30e1\u30a4\u30f3\/test1\/a\uff08value1 = a, value2 = \u3068\u8868\u793a\u3055\u308c\u308b\u306f\u305a\uff09<\/li>\n\n\n\n
  • https:\/\/\u30c9\u30e1\u30a4\u30f3\/test1\/a\/b\uff08value1 = a, value2 = b \u3068\u8868\u793a\u3055\u308c\u308b\u306f\u305a\uff09<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    \u76ee\u7684 \u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u67d4\u8edf\u306b\u53d6\u5f97\u3057\u305f\u3044\u3002 \u30b3\u30fc\u30c9 web.php \u306e\u5185\u5bb9 test1.blade.php \u306e\u5185\u5bb9 Test1.tsx \u306e\u5185\u5bb9 Component.tsx \u306e\u5185\u5bb9 \u52d5\u4f5c\u78ba\u8a8d \u4e0a\u8a18\u30b3\u30fc\u30c9\u3092\u914d\u7f6e\u3057\u3001\u4e0b\u8a183\u3064\u306e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[96,104],"tags":[88,105],"class_list":["post-1183","post","type-post","status-publish","format-standard","hentry","category-laravel","category-react","tag-laravel","tag-react"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1183"}],"version-history":[{"count":1,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1183\/revisions"}],"predecessor-version":[{"id":1184,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1183\/revisions\/1184"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}