Гибкий параметр маршрутизатора a route

На самом деле я разрабатываю приложение, используя 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)

На самом деле, тот факт, что у меня есть :id в URL-адресе, вызывает у меня странную ошибку, подобную этой:

NavLink создан без href или неразрешимого routeName 'detail'

Как я могу продолжить?


reactjs javascript fluxible
person mfrachet    schedule 11.09.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Fluxible вообще не контролирует навигацию. Генератор поставляется с компонентом «Nav», который по умолчанию использует конфигурацию маршрутов для создания навигации, но вы можете изменить этот компонент, чтобы делать все, что хотите. Обычно мы предпочитаем отделять конфигурацию меню от конфигурации маршрутов. В качестве примера вы можете проверить наш исходный код Fluxible.io: https://github.com/yahoo/fluxible.io/blob/master/configs/menu.js

person Michael Ridgway    schedule 11.09.2015
comment
Я посмотрел на то, что у вас есть ссылка, и я понял тот факт, что верхняя панель навигации обрабатывается компонентом навигации. Однако это не помогло мне заставить то, что мне нужно, работать. - person mfrachet; 12.09.2015

arrow_upward
0
arrow_downward

Для быстрого исправления добавьте свойство 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>
            );
        }
person tmt    schedule 14.06.2016