index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html template</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

index.js

import React, {Component} from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import ReactDom from 'react-dom';
import Home from './home';
import List from './list'; class App extends Component{
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route path='/' exact component={Home} />
          <Route path='/list' component={List} />
        </div>
      </BrowserRouter>
    )
  }
}
ReactDom.render(<App/>, document.getElementById('root'));

home.js

import React, {Component} from 'react';

class Home extends Component{
  render() {
    return (
      <div>home</div>
    )
  }
} export default Home;

list.js

import React, {Component} from 'react';

class List extends Component{
  render() {
    return (
      <div>list</div>
    )
  }
} export default List;
我们运行npm run dev ("webpack-dev-server --config ./build/webpack.common.js")。访问localhost:8080/访问没有问题,访问localhost:8080/list说找不到这个页面,这是为什么。
原因是当你这么去访问一个网址的时候,后端,也就是现在的webpackDevServer会因为访问的是后端的一个list页面。但是我们dist下只有index.html,并没有list这个页面。所以提示页面不存在,这是前端做单页应用的时候经常会遇到的一个问题。在webpackDevServer里面要解决这个问题,打开webpack官网。https://webpack.js.org/configuration/dev-server#devserverhistoryapifallback
我们这里只要配置一个historyApiFallback就可以了
module.exports = {
  devServer: {
    historyApiFallback: true
  }
};
这样我们重新访问localhost:8080/list的时候就没有问题了。他的原理是后端服务器如果发现并没有这个/list地址。就会偷摸的转化成根路径的请求,所以不管请求什么地址,都会请求index.html,里面有main.js,也就是我们的业务代码,这里面的路由就能正常的生效。
这里面还可以有其他的配置
historyApiFallback: {
  rewrites: [
    { from: /abc.html/, to: '/index.html' },
  ]
},
这里面如果访问的是abc.html的时候,转化成index.html。所以这里填一个true,等价于from任何路劲,都to到index.html上。

webpack解决单页面路由问题的更多相关文章

  1. Nuxt框架,ssr服务器渲染解决单页面应用的 SEO 问题

    首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信 ...

  2. vue-route+webpack部署单页路由项目,访问刷新出现404问题

    问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...

  3. webpack从单页面到多页面

    前言 从上次更完webpack从什么都不懂到入门之后,好久没有更新过文章了,可能是因为自己懒了吧.今天看了下自己的索引量少了一半o(╥﹏╥)o,发现事态严重,赶紧更新一篇23333 也是因为最近踩了一 ...

  4. 移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)

    开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...

  5. AngularJS单页面路由配置恩,理解了就很简单啦

    利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...

  6. 详解单页面路由的几种实现原理(附demo)

    前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...

  7. 利用hash或history实现单页面路由

    目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...

  8. 简单单页面路由跳转demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue.js结合vue-router和webpack编写单页路由项目

    一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入np ...

随机推荐

  1. wordpress通过$wpdp更新数据表内容

    如下面的代码 更新id为1的数据 table 指的是要更新的数据表 第一个数组 array( 'column1' => 'value1', 'column2' => 'value2' ) ...

  2. 码云clone提示“you do not have permission to pull from the repository”

    使用git进行项目下载,换了电脑,配置了账号和邮箱后,pull一个私有项目的时候,出现如下问题: 原因分析: 由于没有设置Gitee的SSH公钥.生成公钥和配置公钥的办法,可以参考Gitee帮助里面的 ...

  3. Java中用FileInputStream和FileOutputStream读写txt文件,文件内容乱码的问题,另附循环代码小错误

    乱码问题大概就是编码格式不一样,搜了很多都是这么说的,修改编码解决乱码问题链接: https://blog.csdn.net/weixin_42496466/article/details/81189 ...

  4. 【转】JS大总结(带实例)

    JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...

  5. 微信公众号 微信连wifi最全的教程

    微信公众号 微信连wifi最全的教程 http://jingyan.baidu.com/article/1709ad806c69bd4634c4f0b3.html 放到自定义菜单 只能用新建图文 把二 ...

  6. python-继承之多继承

    class BaseRequest(): pass class RequestHandler(BaseRequest): def serve_forever(self): print('Request ...

  7. [转帖]关于DDR4内存颗粒、单双面、主板布线和双通道的那些事儿

    我们200期的期中测试大家都做了吧,今天我们放出了完整的答案,想知道自己错在哪儿的同学赶紧过去看哟=><这次期中考试你拿到满分了吗?没有就快去补习吧> https://www.exp ...

  8. [转帖]PostgreSQL 昨天,今天和明天

    PostgreSQL 昨天,今天和明天 http://www.postgres.cn/v2/news/viewone/1/52 原作者:何伟平(laser) 创作时间:2005-01-15 11:44 ...

  9. java模拟from表单提交,上传图片

    /** * java上传表单,有图片 * @param urlStr 上传地址 * @param textMap 表单参数 * @param fileMap 文件参数 key:文件名称 value:文 ...

  10. 图像人脸检测+人眼检测 (opencv + c++)

    摘要:实现图像中人脸检测,和人眼定位.输出检测标记图像和定位坐标. 工具:vs2015 opencv3  C++ 资源:haarcascade_frontalface_alt2.xml;haarcas ...