折腾：
【规避解决】ReactJS中如何给带多个html页面的app加上路由
后，出现个怪现象：
对于首页，是可以加载对应的index.html，然后路由到”/“，显示Login登录页面的
但是：
在webpack-dev-server时，Mac的Safari浏览器中，点击登录：
跳转Main主页面，会出现404错误：
404 Not Found nginx/1.10.2 |
html是：
<html><head><title>404 Not Found</title></head> <body bgcolor="white"> <center><h1>404 Not Found</h1></center> <hr><center>nginx/1.10.2</center> </body></html> |
但是在Chrome浏览器中，就是可以正常运行的：
另外，去手机端试了试：
Android中：
微信中，登录后跳转也是404
QQ浏览器中，登录后跳转，也是404
但是奇怪的是：显示可以显示出主页面Main中的内容的，但是马上就404了。
React Router: Declarative Routing for React.js
-》
以为是history影响，但是去看了：
http://caniuse.com/#feat=history
都是支持的：
reactjs react-router v4 404 not found
reactjs – react router v4 default page(not found page) – Stack Overflow
reactjs – react-router-dom v4 404 pageNotFound <Route path="*"…/> not working – Stack Overflow
Client side "404 not found" · React Router
Nested route – not found · Issue #4685 · ReactTraining/react-router
Returning 404s from components · Issue #3210 · ReactTraining/react-router
reactjs react-router v4 safari 404 not found
去掉之前的baseName试试
再去Safari中调试发现：
其中加载的是：
http://localhost:4000/rse_web/assets/lib/bootstrap/css/bootstrap.min.css
是打不开的：
而去掉中间的router的url的前缀后：
http://localhost:4000/assets/lib/bootstrap/css/bootstrap.min.css
是可以打开的：
所以，就是rse_web的前缀导致的。
但是Chrome中就是正常的地址：
所以可以正常显示页面。
结果改为：
return ( <Router> <Switch> <Route exact path=’/rse_web/’ component={Login}/> <Route exact path=’/rse_web/main’ component={Main}/> </Switch> </Router> ); this.context.router.history.push(‘/rse_web/main’); |
问题依旧。
BrowserRouter baseName
初探 React Router 4.0–匹配,location,路由,path,Route
随便去试试forceRefresh
const supportsHistory = ‘pushState’ in window.history; console.log(`supportsHistory=${supportsHistory}`); return ( <Router forceRefresh={!supportsHistory}> <Switch> <Route exact path=’/rse_web/’ component={Login}/> <Route exact path=’/rse_web/main’ component={Main}/> </Switch> </Router> ); |
结果没用。
看到：
去尝试把地址改为带前缀的：
问题依旧。
改为：
let curPublicPath = ‘rse_web’; new HtmlWebpackPlugin({ template: ‘./src/app.template.ejs’, filename: ‘index.html’, // chunks: [‘vendor’, ‘index’], hash: true, //assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/` assetsPrefix: isProd ? `/${curPublicPath}` : `http://localhost:${wdsListenPort}` }), |
但是生成的页面，登录页是好的：
但是登录后跳转到主页面后，链接就变了：
http://localhost:4000/rse_web/assets/lib/font-awesome/css/font-awesome.css
所以接下来就是要去找：
为何对于webpack-dev-server来说，
Chrome在登录跳转后，页面link的href地址是正常的，但是对于Safari等其他浏览器，link的href地址就变了，就不对了？
【已解决】Safari调试控制台日志时如何保留日志不被刷新掉
继续调试发现：
此处实际上是可以正常route路由到到Main页面的：
但是之后却又发生了页面导航（页面跳转）：
然后才发生，加载各种css等内容时404找不到内容的情况。
感觉应该是：
在router的push后，不应该再发生页面导航才对
react-router v4 after push navigation 404
react-router v4 after push navigation
react-router v4 history.push but navigation
reactjs – Programmatically navigate using react router V4 – Stack Overflow
How to navigate outside of components in ReactRouter 4? · Issue #5237 · ReactTraining/react-router
V4 Router methods in props · Issue #4005 · ReactTraining/react-router
去找找
withRouter
react-router v4 withRouter
react-router/withRouter.md at master · ReactTraining/react-router
看不太懂，怎么用。
Bring back withRouter? · Issue #3847 · ReactTraining/react-router
withRouter higher order component by alisd23 · Pull Request #4044 · ReactTraining/react-router
reactjs – How to push to History in React Router v4? – Stack Overflow
如何在react-router-v4中通过代码跳转子路由？ – 提问 – React 中文
后来通过对比发现个现象：
Chrome中，会提示：
Form submission canceled because the form is not connected :4000/rse_web/main:1 |
然后页面没有发生导航
而Safari中，没有这个提示，然后页面就发生导航了，跳转新页面：
http://localhost:4000/rse_web/main?
所以感觉应该是这个Form submission canceled导致Safari页面导航的。
所以，还是要先去解决这个问题：
【已解决】ReactJS中警告：Form submission canceled because the form is not connected
然后解决了上面的问题后，现在就已经解决了页面跳转的问题了。
代码详见：
【已解决】ReactJS中警告：Form submission canceled because the form is not connected