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

Question

我有一个关于 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 之前获得了值。

Answer 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={} 之前的'/'。

Answer 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>
    )
}

Answer 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>
  );
};