react-router打包後無法通過路由進入到頁面
阿新 • • 發佈:2017-06-06
裏的 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打包後無法通過路由進入到頁面