在反应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;

点击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 生命周期方法。

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 不适合你，你可以使用 key 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;

如果没有解决您的问题，请告诉我。