迁移rails应用程序时如何临时处理路由？-Java 学习之路

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

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

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

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

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

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

这对你有帮助吗？

回复于 2024-04-29T16:58:02+08:00

迁移rails应用程序时如何临时处理路由？

1 回答

相关问题