React 路由无法通过传递数据渲染组件

Question

我还在学习自己做出反应。这里我尝试使用 sub-route 来渲染一个带有 props 数据的组件，但是没有成功。这是我的简化代码：

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;

BuildingWeb.js

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;

singleArticlepage.js

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;

当我点击/building-web时，它可以渲染Building组件，但是当我点击/building-web/1时，它无法在这里获取singleArticle组件。是因为路径道具不对吗？ 非常感谢。

Answer 1

你的问题是没有在这里传递数据。只需从 /building-web 路由定义中删除确切的道具。

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

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

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

我不知道有任何其他简单的方法可以做到这一点。如果可能的话我也想学:)