reactjs - React router 嵌套路由和数据展示

问题描述

我最近开始学习 react 和 react-router-dom。我的任务是动态路由页面并根据动态路由查看数据。

所以当我路由到这个 url http://localhost:3000/category 时，它应该显示所有类别，当我单击每个类别时，它应该只呈现带有数据的子组件。目前它正在与父组件一起渲染。

示例：如果我路由到这个 url http://localhost:3000/category/nike 它应该只呈现带有 nike 描述的 Product 组件。下面是我的代码。请帮我提出你的建议。

应用程序.js

import { Link, Route, Switch } from "react-router-dom";
import './App.css';
import Home from './Home';
import Category from './Category';

function App() {
  return (
    <div className="App">
      <nav className="navbar navbar-light">
        <ul className="nav navbar-nav">
          <li>
            <Link exact to="/">Home</Link>
          </li>
          <li>
            <Link to="/category">Category</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/"><Home /></Route>
        <Route path="/category"><Category /></Route>
      </Switch>
    </div>
  );
}

export default App;

类别.js

import React from 'react'
import { Link, Route, useParams, useRouteMatch } from "react-router-dom";
import Product from './Product';

export default function Category() {
    const { url, path } = useRouteMatch();
    const productData = [
        {
          id: 1,
          name: "nike",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.",
          status: "Available",
        },
        {
          id: 2,
          name: "slippers",
          description:
            "Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.",
          status: "Out of Stock",
        },
        {
          id: 3,
          name: "Adidas",
          description:
            "Maecenas condimentum porttitor auctor. Maecenas viverra fringilla felis, eu pretium.",
          status: "Available",
        },
        {
          id: 4,
          name: "puma",
          description:
            "Ut hendrerit venenatis lacus, vel lacinia ipsum fermentum vel. Cras.",
          status: "Out of Stock",
        },
      ];
    return (
        <div>
            <ul>
                {productData.map((product) => {
                    return (
                        <li>
                            <Link to={`${url}/${product.name}`}>{product.name}</Link>
                        </li>
                    );
                })}
            </ul>
            <Route path={`${path}/:name`}>
                <Product />
            </Route>
        </div>
    )
}

产品.js

import React from 'react'
import { useParams } from 'react-router-dom';

export default function Product() {
    const {name} = useParams();
    return (
        <div>
            {name}
        </div>
    );
}

标签： reactjsreact-router-dom

您编写代码的方式，但这不是最好的方式，常见且简单的方法是为所有类别视图和特定类别视图创建一个组件，另一种方法是使用/category带有一个组件的路由但使用这样的查询/category?name=nike，然后你可以得到查询字段名称值并匹配，如果该字段丢失，那么我们可以显示所有类别

我已经在代码沙箱中编写了相同的解释，您可以参考该架构并实现相同的

reactjs - React router 嵌套路由和数据展示

问题描述

解决方案

推荐阅读