[英]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.
如果不了解您的应用程序设计的更多信息,我很难解决这是否会成为问题。
// 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.