Question

我仍然在学习自己的反应。在这里，我尝试使用子路径渲染具有道具数据的组件，但它不起作用。这是我的代码已简化：

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定义中删除确切的道具。

<Route path="/building-web" component={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>

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

React路由无法使用传递数据呈现组件

1 个答案: