【新人求助】项目部署后页面刷新有时候会跳回首页

#1

项目用的是react-router v4 HashRouter，
在开发环境下，使用浏览器的刷新可以正常刷，
可是部署后，点击浏览器的刷新就会偶尔跳回首页，
代码中并没有跳回首页的设置，否则开发环境下也会跳的啊。

看了下response，在正常刷新留在当前页的时候返回的是304 not modified，刷新跳回首页的时候是200 OK，为什么只是不停刷新，也会一会儿返回200，一会返回304呢？

Inked%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190912170558_LI

Inked%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190912170603_LI

有大神遇到这种问题么，开发环境没问题，一部署就有问题头大:face_with_head_bandage:

1 Like
#2

304是正常的返回值，表示服务器资源没有改变。(你查一下http 304状态码，这个对应用没有影响)
如果你想要干掉304，你去掉缓存就可以了(在 response header 中加入Cache-Control: no-store)，但是没必要。
至于刷新会跳到首页。
如果你页面原来的url是 http://domain.com/#project 刷新后变成 http://domain.com/ 这个有两种可能，
一个是你服务端有重定向操作，通过302或者301重定向了url，或者是你的代码里有 <Redirect />

#4

1
304和200的区别我是有查过，
我现在预期的是返回304，因为返回304是当前页的刷新，返回200就会跳回首页了。
服务器资源应该是没有改变的啊，后端并没有做过什么修改。
或者，是否有办法知道返回200的时候服务器资源哪里发生了变化呢？

2
我暂时不清楚服务器端有没有设置302重定向，服务器端不是我在弄，但我觉得应该不是这个问题吧，302会因为单纯的刷新而发生吗？还是有时发生有时不发生这样子。

3
代码里有写Redirect，重定向的就是首页，开发环境测试的时候都是好的，但部署后有时刷新是当前页，有时就跳回首页了，还没有规律可循。
难道这是Redirect的内部机制的问题吗？会间歇性无规律地将页面重定向？

image
image.png296×571 6.22 KB

谢大佬:pray:

#5

有没有302, 你看服务器的访问日志就可以了，先排除一下服务器的问题。
然后，你比对一下服务端返回的header中的if-none-match, 这个用来跳回首页的时候和平时是不是都一样的，这个用来确认文件有米有错误。
按照经验来说，代码中有一问题的概率最大，毕竟hashRouter几乎不会出现服务端问题。总之先排除掉服务端，再去试试客户端问题。
客户端的话, 我觉得更大的可能是你的代码里手写了 history.push , 或者 history.replace 这样的代码导致的。比如

if (process.env.NODE_ENV === "production"){
   ....
   history.replace("/")
}

如果是 react-router的重定向造成的，就在代码里找找<Redirect to="/"/>这种操作，你试试看改成 <Redirect to="/not-exists-0"/> 这样， 这样来找找到底是哪一行代码造成的。

#6

我又试了下，发现：

1
不是304和200的问题，浏览器disable cache后每次返回都是200，但全200后仍然是偶尔会跳回首页。

2
代码中没有写push或者replace到地址‘/’的，只有到其他页面的。

事实上不仅刷新有问题，还存在这样的问题，一个按钮的预期效果是弹出新标签，push到pageC：

window.open('/#/project/pagec', '_blank')

但是偶尔会不到pagec，而是去到 http://domain.com。

3
Redirect会影响，已确定是侧导航栏的整体路由设置中的Redirect决定偶尔跳回的是哪一个页面。

跳回 http://domain.com 的情况就和大佬说的一样，
http://domain.com/#/project/pagea 页面刷新后，变成 http://domain.com，
我更改Redirect中‘/’对应的页面为pageB， http://domain.com 也就会去到pageB。
当我删除Redirect，就会去到默认的not Found 404页面，

所以问题根源应该是 刷新 或者 新标签打开push某个非’/'的地址 页面地址会偶尔变成 http://domain.com，然后因为Redirect去到被Redirect的页面。

但Redirect只是决定了 http://domain.com会被重定向的地址，不能决定是否会偶尔 跳到http://domain.com 吧。

我的预期是不跳到 http://domain.com，而是正常到达 http://domain.com/#/project/pagea 之类的页面。

4
经测试，和网络质量有关系，将网络换成连接好一点的，就不会发生上述问题，但一旦换成连接差的网络，就会很经常发生上面两种问题。这个也是代码的原因吗？

已经排了一天了，快崩溃了:pleading_face::pleading_face:

谢大佬:pray:

#7

会不会是登陆验证之类的锅。
配置个无需网络数据的组件试试看还会不发生问题。这个用来排查看看是组件内出的问题，还是组件外部出得问题， 比如 UserLayout中的问题。

 { path: "/static-page": component: ()=> { 
   console.log("render once");
   return <>This is Static Page</>
}

然后在你的 PageAComponent里面的各个生命周期中 console一下，看看路由有没有渲染正到组件，如果渲染到组件是在哪个生命周期中重定向掉的。

#8

我用的阿里的飞冰，建了一个空的Layout加一个空Test组件来测试，地址是 http://domain.com:8080/build/#/user/static：

  • 空Layout
export default function UserLayout(props) {
    console.log('Layout', window.location); // 测试行1
    return (
        <Layout className={styles.Page}>
            {props.children}
        </Layout>
    );
}
  • 空Test组件
export default function index() {
    console.log('window.location.href', window.location.href); // 测试行2
    console.log("render once");
    return (
        <div>
            <p>This is Static Page</p>
        </div>
    )
}
  • 路由：
const routerConfig = [
    {
        path: '/user',
        component: UserLayout,
        children: [
            {
                path: "/static",
                component: Test,
            },]
}]

结果是这样仍然会偶尔跳到 http://domain.com:8080/build/.

当跳到 http://domain.com:8080/build/时，命令行没有输出测试行1和2，而是直接如同打开的就是 http://domain.com:8080/build/一样在运行，这是不是就说明不是组件的问题了？

难道是服务器的问题，可我我用serve -s和Tomcat部署都有这个问题啊= =

越来越困惑了:disappointed_relieved:

谢大佬:pray:

#9

表现起来像是路由组件没有正确匹配上一样。但是第三方组件出错的概率比较低。
当页面出现错误的时候，你看看 chrome有发起ajax请求，看看这部分请求附近的代码。
然后你部署本地又出错吗。
最后如果搞不定的话, 你去看看


这个是 react-router 的官方 config方式配置路由，和你这个的配置差不多，你用这个替换掉你的路由组件试试看。

#10

我试了下， 飞冰的官方模板也有这个问题，那就说明不是我的代码的问题= =

然后，我去飞冰钉钉群问了下，他们觉得是我的网络的问题，网络被代理然后重定向了。

最主要，现在测试出来只有某一个网络连接会有这个问题，其他连接下都不会遇到这个问题，所以就决定暂时不管了:joy:

谢谢大佬的耐心解答:pray::pray: