路由路由器参数路由

Question

我实际上正在使用Fuxible和Reactjs开发应用程序，但遇到了问题。

实际上，我需要在./configs/routes.js中创建不在顶部菜单栏中的路由。

我需要使用：id这样的参数可以访问此路由。

这是我使用的标准路线：

detail: {
        path: '/product/1/details',
        method: 'get',
        page: 'productDetail',
        title: 'product detail',
        handler: require('../components/product/ProductDetail')
    }

我需要做的是：

detail: {
            path: '/product/:id/details',
            method: 'get',
            page: 'productDetail',
            title: 'product detail',
            handler: require('../components/product/ProductDetail')
        }

但不将其添加到顶部导航栏菜单（由Fluxible自动生成）

实际上，我在URL中具有：id的事实给我抛出了一个奇怪的错误，如下所示：

创建的NavLink没有href或无法解析的routeName'detail'

我该如何进行？

Answer 1

Fluxible根本无法控制导航。 生成器附带一个“ Nav”组件，默认情况下使用“路由”配置来生成导航，但是您可以随意修改该组件以执行所需的操作。 我们通常希望菜单配置与路由配置分开。 例如，您可以查看我们的Fluxible.io源代码： https : //github.com/yahoo/fluxible.io/blob/master/configs/menu.js

Answer 2

为了快速解决，请为每个路线添加isSection属性，然后过滤Nav组件中的链接。

//configs/routes.js
about: {
    path: '/about',
    method: 'get',
    page: 'about',
    title: 'About',
    handler: require('../components/About'),
    isSection: true
},
play: {
    path: '/play/:id',
    method: 'get',
    page: 'play',
    title: 'Play',
    handler: require('../components/About'),
    isSection: false
}

//components/Nav.js
if (link.isSection){
            if (selected && selected.name === name) {
                className = 'pure-menu-selected';
            }
            return (
                <li className={className} key={link.path}>
                    <NavLink routeName={link.page} activeStyle={{backgroundColor: '#eee'}}>{link.title}</NavLink>
                </li>
            );
        }