[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-react在github-pages實作historyapi":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},43,"react在github-pages實作historyapi","[React]在github pages實作historyAPI","在github pages實作historyAPI 最近在摸個React專案想部署到github pages當 […]","\u003Ch1>在github pages實作historyAPI\u003C\u002Fh1>\n\u003Cp>最近在摸個React專案想部署到github pages當\u003Cdel>白嫖仔\u003C\u002Fdel>，結果遇到使用historyAPI的route不能順利在github pages上使用。\u003Cbr \u002F>\n翻了許多教學都說可以但一直失敗，最後終於找到原因，必須要使用\u003Cstrong>HashRouter\u003C\u002Fstrong>，這部分很多教學沒有說清楚，使用方式如下。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">import React, { Component } from "react";\nimport { HashRouter, Route, Switch } from "react-router-dom";\nimport Home from ".\u002Fcomponents\u002FHomepage";\nimport Page2 from ".\u002Fcomponents\u002FPage2";\nimport ".\u002FApp.css";\nclass App extends Component {\nrender() {\n  return (\n    <div>\n      <HashRouter basename={process.env.PUBLIC_URL}>\n        <div className="App">\n        <Switch>\n          <Route exact path="\u002F" component={Home} \u002F>\n          <Route exact path="\u002Fpage2" component={Page2} \u002F>\n        <\u002FSwitch>\n        <\u002Fdiv>\n      <\u002FHashRouter>\n    <\u002Fdiv>\n    );\n  }\n}\nexport default App;\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>設定.env\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">PUBLIC_URL=你的網域\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>要使用react-router-dom的HashRouter，並且設定basename，這樣build完後將打包資料部署到github pages上，就能完美使用囉。\u003Cbr \u002F>\n切換router的寫法會像是這樣：domain\u002F#\u002F\u003Crouter-name>\u003Cbr \u002F>\n本方式參考\u003Ca href=\"https:\u002F\u002Ftowardsdev.com\u002Fgithub-pages-does-not-work-for-me-f9d48fd44a5f\" title=\"這篇\">這篇\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>關於React-router上使用historyAPI\u003C\u002Fh2>\n\u003Cp>historyAPI真的滿方便的，但我還在研究中，在react實作有一些需要注意的可以參考\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F27928372\u002Freact-router-urls-dont-work-when-refreshing-or-writing-manually\" title=\"此篇\">此篇\u003C\u002Fa>。\u003C\u002Fp>\n","2022-05-23T17:19:50","",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"node","\u002Fblog\u002Freact在github-pages實作historyapi",1]