Cannot GET URL
使用 React + React Router + Webpack dev server。
理當網址是首頁 /
時,顯示 Popular
component;網址是 /battle
時顯示 Battle
component。
class App extends React.Component {
render() {
return (
<Router>
<ThemeProvider value={this.state} >
<div className={this.state.theme}>
<div className="container">
<Nav />
<Route exact path='/' component={Popular} />
<Route path='/battle' component={Battle} />
</div>
</div>
</ThemeProvider>
</Router>
)
}
}
但輸入 /battle
時,網頁會顯示 Cannot GET /battle。
問題出在 Webpack dev server
問題不在 React Router 本身,而是出在 Webpack dev server。
由於開發環境使用的 Server 來自 Webpack,當網址輸入 http://localhost:8080/battle 時,會和 /battle
Route 請求 GET Request,但此時 React 和 React Router 還沒下載,瀏覽器沒有指示不知道該怎麼處理 /battle
的 GET Request。
解決方式
告訴 Webpack 無論你收到任何的 Request,一律把所有的 Request 都轉址到首頁,由首頁全權負責 Local Routing。轉到首頁後就會開始下載 React 和 React Router,React Router 接收到指令後,發覺網址是 /battle
,就會開始 render Battle
component,顯示 Battle
頁面。
在 webpack.config.js
新增圈起來的地方
-
publicPath
: allows you to specify the base path for all the assets within your application. -
historyAPIFallback
: will redirect 404s to /index.html.
重啓 Webpack dev server 會顯示 404s will fallback to /index.html