reactjs - 组件未在 React Router 上呈现
问题描述
我创建了一个卡片组件,在 Click 上我想渲染一些文章,我正在尝试使用 react,但我不知道我的代码有什么问题(我是初学者)。
当我单击 url 时,文章 id 的行为与我想要的一样,但页面为空白,控制台上没有任何内容(甚至是我的 console.log)
class JobCard extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
componentWillMount() {
fetch(url)
.then(data => data.json())
.then(result =>
this.setState({
data: result,
isLoading: false
})
);
}
render() {
if (this.state.isLoading === true) return <LoadingSpinner />;
else {
const { match } = this.props;
return (
<>
<div>
{data.map(job => (
<div>
<div key={job._id} className="blog-card">
<div className="meta"
<Link
to={{
pathname: `${match.url}/${job._id}/${
job.position_name
}`,
state: job
}}
>
{job.workplace_name}
</Link>{" "}
Job Restaurant
</span>
</p>
</p>
</div>
</div>
<Route path={`${match.path}/:id`} component={Articles} />
</div>
))}
</div>
)}
<Footer />
</>
);
}
}
}
export default JobCard;
未呈现的文章组件:
import React from 'react'
const Articles = ({ location }) => (
<div>
<h1>{location.state.restaurant}</h1>
<h2>{location.state.article}</h2>
{location.state.position_name}
<h4>Hello</h4>
</div>
)
export default Articles;
蚂蚁 App.js
import React, { Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import JobCard from "./components/Cards/JobCard";
class App extends Component {
render() {
return (
<div>
<div>
hello World
</div>
<ul>
<li>
<Link to="/JobCard">JobCard</Link>
</li>
</ul>
<Route exact path="/JobCard" component={JobCard} />
</div>
);
}
}
render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
export default App;
解决方案
您正在 JobCard 组件的 data.map 循环内定义 Articles Route。它应该在循环之外。在您的情况下,这会导致问题。
推荐阅读
- javascript - 我可以在没有 webpack 的情况下使用 react 和 babel 吗?还是我需要所有 3 个组合?
- css - 对多个元素应用相同的 CSS 并稍作更改
- c# - WPF 的 IsKeyboardFocusWithin 属性的 UWP 替代品
- python - 尝试创建一个函数以仅接受 1 到 5 之间的数字并且在 Python 中不接受字符串
- apache-spark - 有没有人能够将 elasticsearch xpack sql 与 Spark 一起使用?
- linux - rpy2 LD_LIBRARY_PATH 冲突
- xamarin - 如何使用 pcl 在 xamarin 表单应用程序中取得联系
- sorting - 按自定义(附加)属性对 laravel eloquent 进行排序
- javascript - firebase 云函数 http 错误代码 403
- php - URL被重新编码?