webpack 配置react-router 服务，及react-router浅析

自己本地写了一个拉取网络实时的统计数据的web，因为有服务端和客户端，所以我为了方便，统一写在了一个文件夹中，目录结构如下（最终目录结构）：

　　服务端的逻辑基本在server里面，web的相关代码都在webroot中。

　　本地启动服务localhost开发react-router相关项目时，碰到了问题，因为是前后端在同一文件夹的，所以前端跑webpack-dev-server,这里面涉及到路径的配置问题，以及对react-router的hash模式或者是history模式都有比较大的影响

　　解决方案：配置如上的目录结构，把dev的页面放到根目录下，只需配置下dev的资源输出路径，其他的就和本地直接开发web项目一样了。

　　上面的方案说的很简单，明确，但是个人走到这一步，确实碰到了许许多多的坑，也涉及到了一些react-router的解析原理，这里就说下我碰到的坑

　　1. localhost 服务配置

　　以常规想法，web的项目都在同目录（webroot）

　　此时，只需要在配置dev-server的publicPath和资源输出路径即可

　　那么本地服务就跑起来了，当然首页的链接就不是常见的链接，而是localhost:8083/webroot；

　　2.非常规本地服务域名，对react-router的影响

　　　显然，localhost:8083/webroot,多了个目录webroot,从我自己的调试结果来看，对react-router匹配是有影响的。具体的两种模式的影响如下：

　　　1）history模式

　　　　个人理解该模式，就是自己通过window.history.pushState来改变页面url但是不刷新页面，这个特性来实现单页面操控的，即在react-router初始化的时候,在点击router-link或者browserHistory.push时，只需触发window.history.pushState即可改变当前路由

　　　 2）hash模式

　　　　个人理解该模式，这种模式，通过的就是location.hash来改变路由地址，当然即使改变了，本页面也不会出现刷新，也不会出现刷新该页面，出现404错误。

　　为了弄清楚多一层文件壳子为什么会干扰到react-router得匹配组件，去找他对应得跳转路由时得源码，一步步的追寻调试路由跳转的过程，最终发现react-router也是基于react Dom-diff算法去修改整个dom得，如上图，这里只是触发了一个setState以及参数是新生成得location对象，这里我目前就先止步了，这个应该和路由匹配规则有关，因为目前得状况是路由是/home，匹配不了localhost:8083/webroot/home,另外一种hash模式也不行，只能用模糊匹配，并且是‘/’这个才能匹配到一个页面切仅能匹配到一个。里面具体得react-router和服务域名得匹配待以后有时间再去研究。毕竟这个当时就是为了解决包含文件夹的dev-server问题，后面灵光一闪，想到静态本地开发资源可以放到根目录（那么开发模式就不用多了一层文件夹了），不必要非放到web目录中（虽然显得不分类别整齐），但是能解决这个问题也不算一个好方式，当然这种场景其实在实际开发中基本不回出现把，这也是本人自己业余的项目和自己研究，与大家分享下

转载于:https://www.cnblogs.com/ylHeyden/p/11526322.html

webpack 配置react-router 服务，及react-router浅析相关推荐

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react ...
使用webpack配置react并添加到flask应用
学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发. 首先要明确一个概念:react的文件必须经过编译才能被 ...
修改webpack配置，在react中使用less
LESS是一个CSS预处理器,比如antD就是基于LESS的. 要在react中使用LESS,需要暴露webpack配置并进行修改,同时安装less和less-loader. 当然网上可以找到很多教程 ...
react webpack配置
react webpack配置接上期 webpack的基础配置同样附上个人git仓库地址:https://gitee.com/zhaosir1/webpack-base-react-cli.git ...
react修改webpack配置，添加别名
第一种方式通过 npm run eject 直接暴露出来react所有的webpack配置文件,暴露出来之后,过程不可逆而且失去了 react-scripts 的统一管理的好处,而且react的w ...
React 不用eject下修改webpack配置实现alisa
使用 customize-cra 和 react-app-rewired 对React项目进行webpack配置的注入 yarn add customize-cra react-app-rewired ...
Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
不暴露 create react app 的webpack配置下，修改webpack配置
使用 react-app-rewired react-app-rewired 传送门安装 react-app-rewired npm install react-app-rewired --save ...
react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
React SSR 服务端渲染实践指南
年前因为工作原因需要对原有 React 项目进行服务端渲染的改造,下面是我对之前工作经验的一些总结分享,希望可以对大家有所帮助. 适用场景首先我们来了解一下 SSR 可以做什么,可以解决什么问题,诞 ...

webpack 配置react-router 服务，及react-router浅析

webpack 配置react-router 服务，及react-router浅析相关推荐

最新文章

热门文章