請教用React Router V6 的React SPA部署到Azure靜態 Web 應用程式的URL問題

react azure web react-router router設定

samuraigo 2022-03-07 17:07:45 ‧ 1012 瀏覽

分享至

如題，我的Router設定如下：

 <Routes>
     <Route path="/test" element={<Test />}/>
     <Route path="/menu" element={<Menu />}/>
     <Route path="/" element={<Menu />}/>
 </Routes>

外層是包BrowserRouter，然後部署完發現直接下baseURL(Azure自己生成的)/test，會無法出現頁面，只有首頁有畫面，查了StackOverflow回答都是説用HashRouter取代BrowserRouter去包就可以解決，因為託管的伺服器他是用資料夾找.html的概念下去找資源，所以SPA他會無法判斷。

嘗試HashRouter後有成功解決，但我就是覺得網址有個hash(#)很醜，想了解Azure靜態 Web 應用程式託管有辦法設定使用BrowserRouter判斷SPA的方式嗎？