webpack解决单页面路由问题
<!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;
module.exports = {
devServer: {
historyApiFallback: true
}
};
historyApiFallback: {
rewrites: [
{ from: /abc.html/, to: '/index.html' },
]
},
webpack解决单页面路由问题的更多相关文章
- Nuxt框架，ssr服务器渲染解决单页面应用的 SEO 问题
首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信 ...
- vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
- webpack从单页面到多页面
前言 从上次更完webpack从什么都不懂到入门之后,好久没有更新过文章了,可能是因为自己懒了吧.今天看了下自己的索引量少了一半o(╥﹏╥)o,发现事态严重,赶紧更新一篇23333 也是因为最近踩了一 ...
- 移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
- AngularJS单页面路由配置恩，理解了就很简单啦
利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...
- 详解单页面路由的几种实现原理（附demo）
前言 路由是每个单页面网站必须要有的,所以,理解一下原理,我觉得还是比较重要的. 本篇,基本不会贴代码,只讲原理,代码在页底会有githup地址,主意,一定要放在服务本地服务器里跑(因为有ajax), ...
- 利用hash或history实现单页面路由
目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...
- 简单单页面路由跳转demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js结合vue-router和webpack编写单页路由项目
一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入np ...
随机推荐
- 简单的api实现以及动态函数调用
实现一个简单的api功能,环境python2.7 请求方法:curl http://ip:8000/?name={api中的方法名}|python -m json.tool 只需编写api的方法即可 ...
- dede织梦5.7的安全防护设置
dede安全是一直令人堪忧的,但是其用来建网站很方便,如果我们使用dede来建站,一定要做好安全防护工作. 下面总结一下dede织梦5.7的安全防护设置 1.更改管理员名称和密码,尽可能设置的复杂一下 ...
- 【Aizu - 0189】Convenient Location （最短路 Floyd算法）
Convenient Location 直接翻译了 Descriptions 明年毕业的A为就业而搬家.就职的公司在若干城市都有办公室,不同天出勤的办公室也不同.所以A在考虑住在哪去各个办公室的时长最 ...
- 缓冲区Buffer和缓存区Cache的区别
1.buffer 将数据写入到内存里,这个数据的内存空间在Linux系统里一般被称为缓冲区(buffer),例如:写入到内存buffer缓冲区,即写缓冲. 为了提高写操作性能,数据在写入最终介质或下一 ...
- 2019杭电多校一 C. Milk (dp)
大意: $n*m$棋盘, 初始位置$(1,1)$, 横坐标为$\frac{m+1}{2}$时可以向下走, 否则只能左右走, 每走一步花费$1$秒. 有$k$管奶, 第$i$罐位置$(r_i,c_i)$ ...
- （四）Maven中的仓库
一.分类 maven的仓库只有两大类: 1.本地仓库 2.远程仓库,在远程仓库中又分成了3种: 2.1 中央仓库 2.2 私服 2.3 其它公共库 二.本地仓库 本地仓库,顾名思义,就是Maven在本 ...
- 奇妙的算法【9】YC每个小孩的糖果数，找公约数，最少硬币数
1,每个小孩的糖果数量是多少 有p个小孩,c个糖果,刚开始第1个小孩发一个糖果,第2个小孩发两个糖果,第p个小孩发p个糖果,如果糖果没有发完,就接着[注意]第1个小孩发p+1个糖果.....第p个小孩 ...
- 空a标签在IE下无效之解决方法
过程就不分析了,只说解决方法: 1.给a标签添加样式:background:url(about:blank); 2.给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使 ...
- 关于微信小程序获取多个formId的实现方法
在此之前,很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId 但是在今年3月份,这个投机取巧的方法(算是微信 ...
- vue+scss动态改变主题颜色
1.新建.scss后缀公用文件,放在assets或者其他地方都可以 /*需要切换的颜色变量*/ $color-primary1:#1776E1; /* 更换的颜色 */ $color-primary2 ...