Question

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

问题是，react应用程序没有进行路由（因为rails app当前处理它）。只有当所有页面都已传输完毕后，我们才能完全转换前端进行反应。

然而，当然，反应应用程序不应该在每个页面上呈现相同的内容。它应该基于它所启动的页面呈现适当的内容（并且它将重新启动每个页面加载，但应用程序本身的脚本将保持不变）。

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

Answer 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'函数将被调用以填充组件视图所需的app状态。

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

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()
    }
}

现在您的动作创建者将返回，关闭您的减速器以填充状态，并且您的组件将能够使用您定义的网址/路径所需的所有数据进行渲染。

这对你有帮助吗？

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

1 个答案: