[英]Component is not rendering on 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。 它應該在循環之外。 這在您的情況下引起問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.