简体   繁体   English

在现有的 Rails 应用程序中嵌入 React 应用程序

[英]Embedding a React App in an existing Rails App

The company I work for is currently experimenting with a newer version of their frontend.我工作的公司目前正在试验其前端的更新版本。 One piece of functionality is a self-contained React app that feeds off Rails APIs.一个功能是一个独立的 React 应用程序,它以 Rails API 为基础。 We'd like to for one part of the app (the React part) use the react router instead of the rails router.我们希望应用程序的一部分(React 部分)使用 react 路由器而不是 rails 路由器。

Is there any way for us to be able to embed the react app as its own section of the app whilst still maintaining sessions and being able to use the rails router for the rails components and the react router for the react components.有什么方法可以让我们将 react 应用程序嵌入到应用程序中作为它自己的部分,同时仍然保持会话并能够将 rails 路由器用于 rails 组件,将 react 路由器用于 react 组件。

Yes this is a very common thing to do especially when migrating into more modern client heavy applications.是的,这是很常见的事情,尤其是在迁移到更现代的客户端应用程序时。

Like you said you will use rails to handle session management through cookies and routing will be the tricky part.就像你说的,你将使用 Rails 通过 cookie 处理会话管理,路由将是棘手的部分。 You may however choose for rails to serve a single page and have react-router handle the rest.但是,您可以选择 Rails 来提供单个页面,并让 react-router 处理其余部分。 That is depending on things like auth see .这取决于诸如 auth see 之类的东西。

Once an html page has been rendered the javascript will load and react-router will handle the rest of the routing.一旦 html 页面被渲染,javascript 将加载并且react-router将处理路由的其余部分。 This means that you will not be able to notify rails of client side route changes.这意味着您将无法通知 rails 客户端路由更改。 It is difficult for me to address if that will be a problem without knowing more about your application design.如果不了解您的应用程序设计的更多信息,我很难解决这是否会成为问题。

Also see this gem .另请参阅此宝石

// Add react in existing app with yarn // 使用纱线在现有应用程序中添加反应

yarn install
yarn add https://github.com/rails/webpacker.git 
yarn add react
yarn add axios 

resolved_paths: ['app/assets'] // Add it in webpacker to get access for assets file resolve_paths resolved_paths: ['app/assets'] // 将其添加到 webpacker 中以获取资产文件的访问权限

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在现有应用程序中将React应用程序与React-Router 4嵌入 - Embedding React app with React-Router 4 in Existing App 在React应用程序中嵌入字体的选项? - Options for embedding fonts in a React app? 在 React App 中嵌入 TikTok 视频; 视频不显示 - Embedding TikTok Video in React App; Video not showing 在反应应用中将Google日历作为iframe嵌入? - Embedding Google calendar as iframe in a react app? 使用 Javascript 将 React 应用程序嵌入为小部件失败,并在 Firefox 和 Chrome 上显示不同的消息 - Embedding React app as a widget with Javascript is failing with different messages on Firefox and Chrome 使用 Google Tag Manager 在另一个网站中嵌入 React 应用程序<script> - Embedding React app in another website with Google Tag Manager using <script> 将 stimulus 和 importmaps 添加到现有的 Rails 6.1 应用程序 - Adding stimulus and importmaps to an existing Rails 6.1 app 将VueJS与Rails现有应用程序部分集成 - Partially integrate VueJS with Rails existing app 如何将带有react-router的React应用程序嵌入到现有的Web应用程序中 - How to embed React app with react-router into existing web app 将现有应用程序转换为 react 会产生意外的令牌“&lt;” - Converting an existing app to react produces unexpected token '<'
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM