Создание маршрутов в строке меню Dynami c в реаги js

Question

Я хочу реализовать навигацию по строке меню, которую я получаю из API. Например, на домашней странице у меня есть четыре меню, такие как menu1 menu2 menu3 menu4, которое отображается всегда. При нажатии на эти меню я хочу получить связанные с ними продукты.

Я читал о вложенных маршрутах в React js, но не могу это реализовать.

Динамики c строка меню категории:

import React from 'react';
import './style.css';
import {Link} from 'react-router-dom';
import Api from '../../Api';

class TopMenu extends React.Component {
    state = {
        categories : []
    }

    componentDidMount(){
        Api.get(`categories`).then(
            response => {
                this.setState({categories: response.data});
            });
    };

    render(){
        return (
            <div className="menu">
                {this.state.categories.map(category => (
                    <Link to={"/category/" + category.name} key={category.id} className="menu-item"><span>{category.name}</span></Link>
                ))}
            </div>
        );
    }
};

export default TopMenu;

Файл моих маршрутов:

import React from 'react';
import {Switch, Route} from 'react-router-dom';
import CategoryProducts from './CategoryProducts';
import Home from './Home';

const Routes = () => {
    return(
        <Switch>
            <Route path='/' exact component={Home} />
            <Route path='/category/:name' component={CategoryProducts} />
        </Switch>
    );
};

export default Routes;

При нажатии на категорию будет просто изменен URL-адрес браузера, а не страница.

CategoryProducts.ja

import React from 'react';
import Products from './Products';

class CategoryProducts extends React.Component {
    render(){
        return (
            <div className="content-wrapper">
                <div className="menu-left">
                    <Products/>
                </div>
            </div>
        );
    }
}

export default CategoryProducts;

Продукты. js

import React,{useState, useEffect} from 'react';
import Api from './Api'
import Card from './components/Card';

class Products extends React.Component {
    state = {
        categories : []
    }

    componentDidMount(){
        let categoryName = this.props.match ? this.props.match.params.name : 'Veg Pizza';
        Api.get(`category/${categoryName}`).then(
            response => {
                this.setState({products: response.data});
            });
    };


    render(){
        return (
            <div>
                <div className="ref">
                    <div className="menu-hr"></div>
                    <div className="menu-cat">
                        <div className="menu-catname ">BESTSELLERS</div>
                    </div>
                </div>
                <div className="card-container">
                    <div className="all-cards" data-label="Bestsellers">
                        <Card />
                    </div>
                </div>
            </div>
        );
    }
};

export default Products;

Answer 1

Компонент «Ваши продукты» не монтируется снова и снова, поскольку он отображается во всех возможных категориях. Поэтому, чтобы получить данные для разных категорий, вам, возможно, придется использовать componentDidUpdate метод жизненного цикла.

import React,{useState, useEffect} from 'react';
import Api from './Api'
import Card from './components/Card';

class Products extends React.Component {
    state = {
        categories : []
    }

    componentDidMount(){
        let categoryName = this.props.match ? this.props.match.params.name : 'Veg Pizza';
        Api.get(`category/${categoryName}`).then(
            response => {
                this.setState({products: response.data});
            });
    };
    
    componentDidUpdate(prevProps, prevState){
      if(prevProps.match.params.name !== this.props.match.params.name){
      Api.get(`category/${categoryName}`).then(
            response => {
                this.setState({products: response.data});
            });
      }
    
    }


    render(){
        return (
            <div>
                <div className="ref">
                    <div className="menu-hr"></div>
                    <div className="menu-cat">
                        <div className="menu-catname ">BESTSELLERS</div>
                    </div>
                </div>
                <div className="card-container">
                    <div className="all-cards" data-label="Bestsellers">
                        <Card />
                    </div>
                </div>
            </div>
        );
    }
};

export default Products;

Если вы все равно хотите принудительно выполнить рендеринг, а componentDidUpdate не работает для вас, вы можете вызвать принудительный рендеринг, используя ключ prop

import React from 'react';
import Products from './Products';

class CategoryProducts extends React.Component {
    render(){
        return (
            <div className="content-wrapper">
                <div className="menu-left">
                    <Products key={this.props.match.params.name}/>
                </div>
            </div>
        );
    }
}

export default CategoryProducts;

Пожалуйста, дайте мне знать, если ваша проблема не решена.