在 React 中循环数据以创建“动态路由”

Posted 2023-02-22

【中文标题】在 React 中循环数据以创建“动态路由”

【英文标题】：Looping over data to create "dynamic routes" in React

【发布时间】：2021-04-09 01:18:27

【问题描述】：

我有一个关于 react-router-dom 的问题。有可能做这样的事情吗？

我使用 React-Bootstrap，所以有些包装器/包装器组件可能是问题所在。

我尝试创建一个动态路由循环：

import React from "react"
import products from "../data/Products"
import Route from "react-router-dom"
import DetailedProduct from "../components/DetailedProduct"

export const ProductRoutesGenerator = () => 
    return (
        products.map((product => 
            return (
                <Route exact path=product.productName component=DetailedProduct(product)/>
            )
        )
    ))

组件应该是这样创建的：

import Container from "react-bootstrap"

export const DetailedProduct = (props) => 
    return (
        <Container>
            <h1>props.productName</h1>
            <h3>props.productDescription</h3>
            <h5>props.productPrice</h5>
        </Container>
    )

提前感谢您的帮助:-)

编辑： index.js 文件如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import BrowserRouter from "react-router-dom"

ReactDOM.render(
      <React.StrictMode>
              <BrowserRouter>
                    <App/>
              </BrowserRouter>
      </React.StrictMode>,
  document.getElementById('root')
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

我刚刚将 BrowserRouter 包裹在 App 上。除此之外，所有代码都应该是 create react 命令的默认代码。

products 是一个用于测试的 javascript 对象，它看起来像这样：

export const products = [
  
    "id": "0",
    "productName": "testProduct0",
    "productDescription": "testDescription",
    "productPrice": 10
  
,
  
    "id": "1",
    "productName": "testProduct1",
    "productDescription": "testDescription",
    "productPrice": 20
  
...

ReactDOM.render(
      <React.StrictMode>
          <div>
              <h1>
                  products[1].productName
              </h1>
          </div>
              <BrowserRouter>
                    <App/>
              </BrowserRouter>
      </React.StrictMode>,
  document.getElementById('root')
)

将我的产品名称呈现给我，所以是的，我在调用 BrowserRouter 之前获得了值。

【问题讨论】：

您的代码中是否使用了Router 或Switch？

products 在第一次渲染时是否有价值？

【参考方案1】：

import React from "react"
import products from "../data/Products"
import Route from "react-router-dom"
import DetailedProduct from "../components/DetailedProduct";

export const ProductRoutesGenerator = () => 
    return (
            products.map((product) => 
                return (
                    <Route
                        exact
                        path='/' + product.productName
                        key=product.id
                        children= <DetailedProduct product=product/>  />
                )
            )
    )

这是一段旅程！所以我设法渲染了一个动态组件并将动态路由链接到它。

我错过了两件事。 Route 中product.productName 和children= 之前的'/'。

【参考方案2】：

您缺少 Switch 来封装路由。这应该可以解决问题：

import React from "react"
import products from "../data/Products"
import Route, Switch from "react-router-dom"
import DetailedProduct from "../components/DetailedProduct"

export const ProductRoutesGenerator = () => 
    return (
        <Switch>
            products.map((product) => 
                return (
                    <Route
                        exact
                        key=product.id
                        path=product.productName
                    >
                        <DetailedProduct ...product />
                    </Route>
                )
            )
        <Switch>
    )

【讨论】：

我更改了答案，我认为路线中的 component 道具有问题。可以试试吗？

我一定会试试的

我试过了，还是不行。我也尝试了一些东西，但即使执行代码并且没有引发错误，似乎也无法创建类似路由生成器的东西。它只是将我链接到一个空站点：/

嗯，通常我将路径设置为/something。您是否尝试过添加斜线？

<Route exact path="/testProduct2" component=testComp/> <ProductRoutesGenerator/> 当我单击 testProduct2 的按钮时，会渲染 testComponent，但来自“生成器”的其他路由不会触发。也许他们甚至不存在。

【参考方案3】：

试试这个代码：

import React from "react";
import  products  from "../data/Products";
import  Route  from "react-router-dom";
import  DetailedProduct  from "../components/DetailedProduct";

export const ProductRoutesGenerator = () => 
  return products.map((product, index) => 
    return (
      <Route
        exact
        path=product.productName
        key=index
        component=<DetailedProduct product=product />
      />
    );
  );
;

//=====================

import  Container  from "react-bootstrap";

export const DetailedProduct = ( product ) => 
  return (
    <Container>
      <h1>product.productName</h1>
      <h3>product.productDescription</h3>
      <h5>product.productPrice</h5>
    </Container>
  );
;

【讨论】：

它不起作用。我知道，因为我有一个链接到产品 2 按钮的测试组件。所以当我单击产品 2 的按钮时，它会呈现我的测试组件，但所有其他按钮只会将 url 更改为 /productX 而不会呈现任何组件。