Fixing the "cannot GET /URL" error on refresh with React Router

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。

Cannot GET URL

問題出在 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


相關閱讀

1個讚

這個算是 web server 的問題

react router 是前端的 router
就和這段說的一樣~

也就是說~ 只要用到前端 router 技術
都需要強制將 request 導向到 entry 入口的 .js

另外
如果今天和後端合作的話,在一個已存在的網站上新增幾個活動頁面
e.g.
這是早就存在的網站 https://cola.shop.io/

這次要新增的活動頁面 https://cola.shop.io/dai-activity-page
活動頁下包含的 url 都是用 react router 完成

https://cola.shop.io/dai-activity-page/page1
https://cola.shop.io/dai-activity-page/page2
https://cola.shop.io/dai-activity-page/page3

這時候
publicPath 就會是 https://cola.shop.io/dai-activity-page

1個讚

喔喔 有清楚了 :+1: