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 ...
随机推荐
- 粒子系统与雨的效果 (DirectX11 with Windows SDK)
前言 最近在学粒子系统,看这之前的<<3D图形编程基础 基于DirectX 11 >>是基于Direct SDK的,而DXSDK微软已经很久没有更新过了并且我学的DX11是用W ...
- 解决jdk卸载出错2502、2503
之前装的jdk1.6,后来软件要求用1.8,就卸载了1.6,卸载的时候出现了这个问题.后来又有其他软件用1.8出错,就又要装1.6,脑壳疼.网上建议先卸载1.8再装低版本,结果卸载1.8,又出现错误2 ...
- Spring 控制器层如何启用验证？
1.示例代码 @PostMapping("/adduser") public String addUser(@Valid User user,BindingResult bindi ...
- Net中实现HTML生成图片或PDF
Net中实现HTML生成图片或PDF的几种方式 前段时间由于项目上的需求,要在.Net平台下实现把HTML内容生成图片或PDF文件的功能,特意在网上研究了几种方案,这里记录一下以备日后再次使用.当时想 ...
- Python 实现二分查找（递归版）
二分查找 为什么使用二分查找: python中的列表,一般取值为遍历这个列表,直到取到你想要的值,但是如果你的列表是一个有着百万元素的列表呢,那样for循环遍历列表就会很慢,可能会循环几十万次,才能找 ...
- 乐字节Java变量与数据结构之二：Java常量与变量
大家好,小乐又来给大家讲述Java基础知识.上次说了乐字节Java变量与数据类型之一:Java编程规范,关键字与标识符,这次将接着往下说,谈谈Java常量与变量. 1.常量 1).定义 在程序执行的过 ...
- 基于.Net Standard开发的微信服务端开源库
一直想做一个开源库, 为社区贡献一份力量, 同时提高一下自己 一年来在给公司做一款微信小程序, 于是突发奇想用.Net Standard做一整套微信开发服务端类库 地址: https://gitee. ...
- MAVEN（二）
1.本地仓库?Maven到底有哪些仓库?它们什么关系? Maven仓库: 本地仓库路径配置: 包查找路径:本地——>私服——>中央仓库,然后将查找到的jar同步到私服——>本地仓库 ...
- MVC-初识
RAZOR视图介绍 一个cshtml,主体是一个html文本,里面可以写前台和后台代码,混合编写(个人认为不太好,应该分离),这个文件最后会被会被编译为一个类(所以他可以像类一样写一些方法,其他的地方 ...
- JVM -- 虚拟机中的对象
一.HotSpot虚拟机 它是Sun JDK和OpenJDK中所带的虚拟机,也是目前使用范围最广的Java虚拟机.我们大致知道虚拟机内存的概况,也许更想了解这些虚拟机内存的数据的其他细节,誓如它们是如 ...