Javascript 反应路线'；t使用传递的数据渲染组件

我仍在自学如何应对。在这里，我尝试使用sub-route来渲染包含道具数据的组件，但没有成功。以下是我简化的代码：

App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Link } from "react-router-dom";
import Building from "../components/listingPage/buildingWeb";

class App extends Component {

 render() {
   return (
    <Router className="App">
    <div>
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <Link to="/building-web">Building Web</Link>           
        </div>
      </nav>
      <Switch>
        <Route exact path="/building-web" component={Building} />
      </Switch>
    </div>
    </Router>
    );
   }
  }

export default App;

import React, { Component } from "react";
import ListPage from "../../common/listPage";
import ArticleApi from "../../api/articleApi";
import SingleArticle from "./singleArticlepage";
import { Link, Route } from "react-router-dom";
// data sample
  const productsData = [
      {
        id: 1,
        name: "NIKE Liteforce Blue Sneakers",
        description: "test",
        status: "Available"
       }
      ];

class Building extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: productsData
    };
  }

  render() {
    return (
  <div className="nav-text">
    <h1>Coding fun page</h1>
    <table>
      <tbody>
        {this.state.products.map(product => (
          <tr key={product.id}>
            <td>
              <Link to={`${this.props.match.url}/${product.id}`}>
                {product.name}
              </Link>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
    <Route
      path={`${this.props.match.url}/:productId`}
      // this part doesn't work
      render={props => <SingleArticle data={this.state.products} {...props} />}
    />
  </div>
    );
  }
}

export default Building;

import React from "react";

const SingleArticle = ({ match, data }) => {
  var product = data.find(p => p.id === Number(match.params.productId));
  var productData;

  if (product)
    productData = (
      <div>
        <h3> {product.name} </h3>
        <p>{product.description}</p>
        <hr />
        <h4>{product.status}</h4>{" "}
      </div>
    );
  else productData = <h2> Sorry. Product doesnt exist </h2>;

  return (
    <div>
      <div>{productData}</div>
    </div>
  );
};

export default SingleArticle;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react router dom”导入{Link}；
从“./components/listingPage/buildingWeb”导入建筑；
类应用程序扩展组件{
render（）{
返回(
建筑网
);
}
}
导出默认应用程序；

BuildingWeb.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Link } from "react-router-dom";
import Building from "../components/listingPage/buildingWeb";

class App extends Component {

 render() {
   return (
    <Router className="App">
    <div>
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <Link to="/building-web">Building Web</Link>           
        </div>
      </nav>
      <Switch>
        <Route exact path="/building-web" component={Building} />
      </Switch>
    </div>
    </Router>
    );
   }
  }

export default App;

import React, { Component } from "react";
import ListPage from "../../common/listPage";
import ArticleApi from "../../api/articleApi";
import SingleArticle from "./singleArticlepage";
import { Link, Route } from "react-router-dom";
// data sample
  const productsData = [
      {
        id: 1,
        name: "NIKE Liteforce Blue Sneakers",
        description: "test",
        status: "Available"
       }
      ];

class Building extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: productsData
    };
  }

  render() {
    return (
  <div className="nav-text">
    <h1>Coding fun page</h1>
    <table>
      <tbody>
        {this.state.products.map(product => (
          <tr key={product.id}>
            <td>
              <Link to={`${this.props.match.url}/${product.id}`}>
                {product.name}
              </Link>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
    <Route
      path={`${this.props.match.url}/:productId`}
      // this part doesn't work
      render={props => <SingleArticle data={this.state.products} {...props} />}
    />
  </div>
    );
  }
}

export default Building;

import React from "react";

const SingleArticle = ({ match, data }) => {
  var product = data.find(p => p.id === Number(match.params.productId));
  var productData;

  if (product)
    productData = (
      <div>
        <h3> {product.name} </h3>
        <p>{product.description}</p>
        <hr />
        <h4>{product.status}</h4>{" "}
      </div>
    );
  else productData = <h2> Sorry. Product doesnt exist </h2>;

  return (
    <div>
      <div>{productData}</div>
    </div>
  );
};

export default SingleArticle;

import React，{Component}来自“React”；
从“../../common/ListPage”导入ListPage；
从“../../api/ArticleApi”导入ArticleApi；
从“/singleArticlepage”导入SingleArticle；
从“react router dom”导入{Link，Route}；
//数据样本
常数产品数据=[
{
id:1，
名称：“NIKE Liteforce蓝色运动鞋”，
描述：“测试”，
状态：“可用”
}
];
类构建扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
产品:productsData
};
}
render（）{
返回(
编码乐趣页
{this.state.products.map（product=>(
{product.name}
))}
您的问题不是在此处传递数据。只需从/building web Route定义中删除确切的道具即可

<Route path="/building-web" component={Building} />



但是，使用此设置，您的主建筑组件将始终呈现在SingleArticle组件之上。如果您只想显示SingleArticle，则需要在建筑组件中显示类似的内容：

  <div className="nav-text">
    <Route
      exact
      path="/building-web"
      component={() => (
        <div>
          <h1>Coding fun page</h1>
          <table>
            <tbody>
              {this.state.products.map( product => (
                <tr key={product.id}>
                  <td>
                    <Link to={`${ this.props.match.url }/${ product.id }`}>
                      {product.name}
                    </Link>
                  </td>
                </tr>
              ) )}
            </tbody>
          </table>
        </div>
      )}
    />
    <Route
      path={`${ this.props.match.url }/:productId`}
      // this part doesn't work
      render={props => <SingleArticle data={this.state.products} {...props} />}
    />
  </div> 


(
编码乐趣页
{this.state.products.map（product=>(
{product.name}
) )}
)}
/>
谢谢你的解决方案。实际上我正在通过这个例子学习嵌套路由：，但是我按照他们的例子对我的代码做了一些修改，然后它就不起作用了。欢迎你。如果你想要常规嵌套路由，那么只需从你的定义中删除
确切的
道具。你不需要我的第二个建议。如果我的答案是只要满足你的需要，你可以考虑接受它。