javascript - React 路由无法通过传递数据渲染组件
问题描述
我还在学习自己做出反应。这里我尝试使用 sub-route 来渲染一个带有 props 数据的组件,但是没有成功。这是我的简化代码:
应用程序.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;
单篇文章页面.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 组件。是因为路径道具不对吗?非常感谢。
解决方案
您的问题不是在这里传递数据。只需从 /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>
我不知道有任何其他简单的方法可以做到这一点。如果可能的话,我也想学习:)
推荐阅读
- microsoft-dynamics - 用于将更改发布到 ServiceBus 的 Common Data Services Logic App Connector 或服务端点
- c# - OpenGL4 - 如何旋转对象以查看另一个对象
- git - Github SSH 密钥被忽略
- typescript - 为什么打字稿将任何分配给明确定义的类型?
- python - 用换行符分隔 python 元组
- docker - 在 Docker 容器中构建 .NET Core 项目时,如何将 GitVersion 集成到 TeamCity 中?
- php - 来自 Web 服务的 PHP 字符串比较
- python - 每次使用 python 启动系统时制作本地键盘记录器发送电子邮件
- date - Flutter/Dart - 在输入表单中格式化日期
- java - Java中根据年龄和性别随机生成团队