devbox
算法设计者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   jquery > 正文

服务器呈现使用react-router在URL前缀后面反应应用程序

作者：算法设计者 | 2022-12-14 19:06:50

赞

踩

javascript,nginx,reactjs,react-router,服务器,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我正在使用react-router,React 0.14和nginx来渲染一个通用的JS应用程序.因为我正在转换现有的应用程序,我需要将新的'react'代码放在url前缀后面,比如说/foo

但是,我理想地喜欢nginx配置来处理在proxy_pass本地端口上运行的react服务器(例如8080).

nginx conf

location /foo/ {
    proxy_pass http://localhost:8080/;
    proxy_set_header Host $host;
}

反应路由器 routes.jsx

import HomePage from 'components/pages/HomePage';
import AboutPage from 'components/pages/AboutPage';
import NotFoundPage from 'components/pages/NotFoundPage';

export default (
    
        
        
        
    
);

服务器上没什么特别的.服务器端呈现似乎工作正常,但当它到达客户端时,由于路径不匹配,它在控制台中显示以下警告:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) 



我认为这是有道理的,因为URL实际上http://localhost:80801/foo不是http://localhost:8081/客户端期望的反应路由器.



除了将/foo前缀放在顶级路线之外,还有其他方法吗？我不想这样做的原因是我不想在/foo任何地方都有前缀(例如在组件中).



MTIA!


1> Kyeotic-Stop..：
您可以baseURL在设置历史记录对象时进行配置.



import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
  basename: '/foo'
})


            
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/jquery/detail/13413
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。