如何使用fluxible-router处理动态路由参数

Question

如何使用fluxible-router访问动态导航参数

例如，如果我有一个用户组件，我想根据路由设置组件的 userId 属性

// configs/routes.js
module.exports = {
    home: {
        method: 'GET',
        path: '/',
        handler: require('../components/Home.jsx'),
        // Executed on route match
        action: require('../actions/loadHome')
    },
    user: {
        method: 'GET',
        path: '/user/:id',
        handler: require('../components/User.jsx')
    }
};

https://github.com/yahoo/fluxible-router/blob/master/docs/quick-start.md

如何在 User.jsx 组件中访问该 userId？

Answer 1

我假设您在这里使用的是fluxible-router，生成的应用程序通常会这样做。

每个路由器调用都包含一个 Payload 参数：

module.exports = {
    user: {
        method: 'GET',
        path: '/user/:id',
        handler: require('../components/Home.jsx'),
        action: function(context, payload, done) {
            console.log( payload.toJS() );
            context.executeAction(registerCollector, payload, done);
            done();
        }
    }
};

更多关于在the docs 中创建此参数的位置。但该参数包含所有作为 JSON 对象的 URL 参数。

要访问它们，您必须使用 payload.toJS() 函数。我花了很长时间才找到，因为它没有在文档中强调。

要直接在组件中访问它们，请使用handleRoute API。

这应该可以解决您的问题。