首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：jerry613 | 2023-09-10 18:26
如何解决《服务器呈现使用react-router在URL前缀后面反应应用程序》经验，为你挑选了1个好方法。

我正在使用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'
})


            


    


    


    

        
推荐阅读
devbox
jerry613
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有