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

单击类别只会更改浏览器 url，而不是页面。

类别产品.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

您的 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;

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