在react js中的动态菜单栏上创建路由

Question

我想实现菜单栏上的导航，这是我从API中获取的。例如，在主页上，我有四个菜单，如menu1、menu2、menu3、menu4，它们总是显示。点击这些菜单，我想获取与它们相关的产品。

我读过React js中的嵌套路由，但无法实现它。

类别的动态菜单栏：

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;

click on Category只会更改浏览器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;

Products.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

您的Products组件不会一次又一次地挂载，因为这会呈现在所有可能的类别上。因此，为了获取不同类别的数据，您可能必须使用componentDidUpdate生命周期方法。

null

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;