zoukankan      html  css  js  c++  java
  • react-router打包后无法通过路由进入到页面

    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',
  • 相关阅读:
    u盘安装linux提示:Loader exited unexpectedly!……install exitedabnormally
    接口练习代码
    c#里面的索引器注意
    MD5方法代码(生成小写的md5) C#版本
    sql 中set和select区别
    sql 中convert和cast区别
    数据库触发器inserted和deleted详解
    (转载)处理delete不走索引导致锁等待异常
    Mysql Using FileSort问题
    (转)[MySQL高级](一) EXPLAIN用法和结果分析
  • 原文地址:https://www.cnblogs.com/fengnovo/p/6951533.html
Copyright © 2011-2022 走看看