1. 程式人生 > >react-router打包後無法通過路由進入到頁面

react-router打包後無法通過路由進入到頁面

裏的 col ces con def gin cnblogs style 數據

react-router打包後無法通過路由進入到頁面,是因為當我們使用react-router-dom裏的BrowserRouter as Router時,是用瀏覽器history對象的方法去請求服務器,

如果服務器沒有相對於的路由去指向對應的頁面路由會找不到資源。

BrowserRouter會變成類似這樣的路徑 http://111.230.139.105:3001/detail/9459469,這樣的路徑在訪問服務器時,服務器會認為是請求查找某個接口數據

This request URL /detail/9459469 was not found on this server.

所以這時候必須使用HashRouter,這時候訪問具體頁面時就是http://111.230.139.105:3001/#/detail/9459469

import { HashRouter as Router, Route } from ‘react-router-dom‘
import createHistory from ‘history/createHashHistory‘
const history = createHistory()

<Router history={history}>
             <Route render={({ location }) => {
                  return(
                        <div>
                            <Route location={location} exact path="/" component={Home} />
                            <Route location={location} path="/detail/:id" component={Detail} />
                            <Route location={location} path="/comment/:id" component={Comment} />
                        </div>
                  )}}/>
        </Router> 

webpack打包時要添加NODE_ENV,並且將devtool:‘eval-source-map‘,去除,不然build出來的js特別大,source map是為了代碼出錯後采用source-map的形式直接顯示你出錯代碼的位置

打包生產包時去除,加上這兩個後大部分簡單單頁面應用會在100k到200k

new webpack.DefinePlugin({
    "process.env": {
    NODE_ENV: JSON.stringify("production")
    }
}),    
// devtool:‘eval-source-map‘,

react-router打包後無法通過路由進入到頁面