最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS中页面跳转后显示nginx 404 Not Found

nginx crifan 5767浏览 0评论

折腾:

【规避解决】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

reactjs – React Router V4 but on a different homepage in package.json… fix 404 not found? – Stack Overflow

去掉之前的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

转载请注明:在路上 » 【已解决】ReactJS中页面跳转后显示nginx 404 Not Found

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.180 seconds, using 22.07MB memory