迁移rails应用程序以做出反应时如何临时处理路由？答案

【问题标题】：How to temporarily handle routing when migrating a rails app to react?迁移rails应用程序以做出反应时如何临时处理路由？
【发布时间】：2016-09-15 10:32:57
【问题描述】：

我正准备将一个单一的 Rails 应用程序迁移到一个带有 Rails 后端和 json api 的 React 应用程序。目前，我们已将 react 应用程序作为静态资产集成到我们的 rails 应用程序中，并且正在缓慢地将每个页面转换为由 react 呈现。

问题是，react 应用程序不执行路由（因为 rails 应用程序当前处理它）。只有当所有页面都传输完毕后，我们才希望完全转换前端以做出反应。

但是，react 应用程序当然不应该在每个页面上呈现相同的内容。它应该根据启动它的页面呈现适当的内容（并且它会在每次页面加载时重新启动，但应用程序本身的脚本将保持不变）。

所以问题是，启用 react 以呈现适当内容的推荐方法是什么。使用 react-router 是否有意义，并且仅使用它来根据 url 呈现内容，而不是让它处理链接？

【问题讨论】：

另外，如果这不是一个明智的迁移策略，或者有更好的方法来处理这个问题，我很想听听。
我现在对单独的页面使用单独的 React 组件。（路由只能使用 Rails 完成。）准备好后，您可以将这些确切的组件移动到 react-router 的 Route-s 并一步完成最终转换。
是的，我已经在做类似的事情了。但是，如果所有页面都可以由同一个应用程序（相同的 js 包）呈现，那就太好了，否则我们必须为每个页面都有一个单独的包。这就是为什么我正在考虑实现一种路由来决定在哪里渲染什么。
例如，您可以设置需要特定反应视图 onEnter 的反应路线——因此，如果您转到该特定 url，您可以在状态中加载您需要的数据并呈现该特定视图（组件） .这有意义吗？
@jakeaaron 没错，我就是这么想的。我想我必须弄清楚如何让路由器更好地识别它应该加载的视图，但是使用 redux 加载所需的数据应该很容易。而且我暂时可以随时将数据缓存在localstorage中。对您来说，这似乎是一种明智的（临时）方法吗？

标签： ruby-on-rails ruby reactjs routing

【解决方案1】：

所以在你的路由文件中：

export default function(requirePlanData) {
    return (
        <Route path="/">
            <Route path="(:lang/)reading-plans" component={PlansView}>
            <Route path=":id(-:slug)" component={AboutPlanView} onEnter={requirePlanData} />
        </Route>

    )
}

在这里您可以看到，在渲染“/en/reading-plans/903”时，将渲染“AboutPlanView”组件，并且将调用“requirePlanData”函数来填充组件视图所需的应用程序状态。

在带有 requirePlanData 的主 js 文件中，您可以为 API 调用调用动作创建者，并在加载视图之前使用减速器填充状态：

function requirePlanData(nextState, replace, callback) {
    const { params } = nextState
    var idNum = parseInt(params.id.toString().split("-")[0])
    const currentState = store.getState()
    if (currentState && currentState.plansDiscovery && currentState.plansDiscovery.plans && currentState.plansDiscovery.plans.id === idNum) {
        callback()
    } else if (idNum > 0) {
        store.dispatch(PlanDiscoveryActionCreators.readingplanInfo({ id: idNum, language_tag: window.__LOCALE__.planLocale }, store.getState().auth.isLoggedIn)).then((event) => {
           callback()
        }, (error) => {
           callback()
        })
    } else {
        callback()
    }
}

现在您的动作创建者将返回，启动您的 reducer 以填充状态，并且您的组件将能够根据您定义的 url/路由使用所有必需的数据进行渲染。

这对你有帮助吗？

【讨论】：

太棒了！我也是这么想的，但我不知道这是否是一种明智的做法。感谢您的帮助！
没问题！实际上，我正处于与您完全相同的过程中，这就是我们正在做的事情！ :)