Реагировать на ссылку маршрутизатора на неправильный компонент

Question

Я получил заголовок navbar с этими элементами: Домой, Категории, О нас и Контакт. Внутри категорий есть суб-панель навигации, содержащая 3 элемента: Книги, Еда и Фильмы. Проблема в реагирующем маршрутизаторе, каждый раз, когда я выбираю пункт из панели навигации, он всегда идет к компоненту Категории. Другие элементы заголовка работают нормально. Вот мой код:

pageRouters.js:

import Home from '../components/home';
import Category from '../components/category';
import AboutUS from '../components/about';
import Contact from '../components/contact';
import Book from '../components/category/book';
import Food from '../components/category/food';
import Movie from '../components/category/movie';


export const cat_url = 'category';
export const about_url = 'about';
export const contact_url = 'contact';
export const book_url = 'books';
export const food_url = 'food';
export const movie_url = 'movie';


const pageRouters = [
    {
        name: 'Home',
        path: '/',
        component: Home,
        exact: true
    },
    {
        name: 'Categories',
        path: `/${cat_url}`,
        component: Category,
        items: [
            {
                name: 'Books',
                path: `/${cat_url}/${book_url}`,
                component: Book,
            },
            {
                name: 'Food',
                path: `/${cat_url}/${food_url}`,
                component: Food,
            },
            {
                name: 'Movie',
                path: `/${cat_url}/${movie_url}`,
                component: Movie,
            }
        ]
    },
    {
        name: 'About',
        path: `/${about_url}`,
        component: AboutUS
    },
    {
        name: 'Contact',
        path: `/${contact_url}`,
        component: Contact
    }
];

export default pageRouters;

Header.js:

import React, { PureComponent } from 'react';
import { Route, Link } from 'react-router-dom';
import pageRouters from '../pageRouters';

class Header extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            routers: pageRouters
        };
    }

    render() {
        const { routers } = this.state;
        return (
            <div id="header">
                {routers.length && (
                    <ul className="nav">
                        {routers.map((url, key) => {
                            if (url.name === 'Categories') {
                                return (
                                    <li key={key}>
                                        {url.name}
                                        <ul id='subNav'>
                                            {url.items.map((item, key) => {
                                                return (
                                                    <Route key={key} path={item.path} exact={item.exact}>
                                                        <li>
                                                            <Link to={item.path}>
                                                                {item.name}
                                                            </Link>
                                                        </li>
                                                    </Route>
                                                );
                                            })}
                                        </ul>
                                    </li>
                                );
                            }
                            return (
                                <Route key={key} path={url.path} exact={url.exact}>
                                    <li>
                                        <Link to={url.path}>
                                            {url.name}
                                        </Link>
                                    </li>
                                </Route>
                            );
                        })}
                    </ul>
                )}
            </div>
        );
    }
}

export default Header;

Answer 1

я думаю, вы должны объявить параметры маршрута следующим образом

const pageRouters = [
{
    name: 'Home',
    path: '/',
    component: Home,
    exact: true
},
{
    name: 'Categories',
    path: `/${cat_url}`,
    component: Category,
    items: [
        {
            name: 'Books',
            path:/category/:bookId,
            component: Book,
        },
        {
            name: 'Food',
            path:/category/:FoodId,
            component: Food,
        },
        {
            name: 'Movie',
            path:/category/:MovieId,
            component: Movie,
        }
    ]
},
{
    name: 'About',
    path: `/${about_url}`,
    component: AboutUS
},
{
    name: 'Contact',
    path: `/${contact_url}`,
    component: Contact
}

];