1

我实际上正在使用 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'

我该如何进行？

4

2 回答 2

1

Fluxible 根本不控制导航。生成器附带一个“Nav”组件，默认情况下使用路由配置生成导航，但您可以自由修改该组件以执行任何您想要的操作。我们通常喜欢将菜单配置与路由配置分开。例如，您可以查看我们的 Fluxible.io 源代码：https ://github.com/yahoo/fluxible.io/blob/master/configs/menu.js

于 2015-09-11T19:21:00.427 回答
0

为了快速修复，向每个路由添加一个 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>
            );
        }
于 2016-06-14T22:19:31.660 回答