如何解决Reach-Router 不向 Link 提供状态
我正在尝试将博客呈现为卡片，然后将其作为页面打开，但事实证明使用 Gatsby 很难。我用 React 路由器做了完全相同的事情，但它似乎不适用于 Gatsby。我知道我可以使用 GraphQL 但我肯定可以使用 REST 做同样的事情。我正在使用 Contentful 顺便说一句
我按照另一篇文章中的建议切换到路由器，但这不起作用。
我不断收到此错误：
app.post("/upload-matching-config",uploads.single("txt"),async (req,res) => {
// Read the file and send to the callback
fs.readFile(req.file.path,handleFile);
let obj;
let DataSourceID_1;
let DataSourceID_2;
let jsonData_1 = [];
let jsonData_2 = [];
let DSID_1;
let DSID_2;
// Write the callback function
async function handleFile(err,data) {
try {
obj = JSON.parse(data);
DataSourceID_1 = obj.DataSourceID_1;
DataSourceID_2 = obj.DataSourceID_2;
console.log(DataSourceID_1);
console.log(DataSourceID_2);
} catch (err) {
console.log("Something went wrong!" + err);
}
try {
jsonData_1 = await Source.findOne({
DataSource_ID: DataSourceID_1,});
DSID_1 = jsonData_1._id;
} catch (err) {
console.log("Something went wrong!" + err);
}
try {
jsonData_2 = await Source.findOne({
DataSource_ID: DataSourceID_2,});
DSID_2 = jsonData_2._id;
} catch (err) {
console.log("Something went wrong!" + err);
}
console.log(DSID_1);
console.log(DSID_2);
const matching = new Matching({
DSID_1: DSID_1,DSID_2: DSID_2,DataSourceID_1: DataSourceID_1,DataSourceID_2: DataSourceID_2,matchingRules: obj.matchingRules,MatchingReport_Content: obj.MatchingReport_Content,DataSource_1_UnmatchedReport_Content:
obj.DataSource_1_UnmatchedReport_Content,DataSource_2_UnmatchedReport_Content:
obj.DataSource_2_UnmatchedReport_Content,});
try {
await matching.save().then((data) => {
res.send(data);
});
} catch (err) {
console.log(err);
res.status(400).json({
message: "DataSources you are trying to match does not exist!",});
}
}
});
path<Router>: Children of <Router> must have a defaultorprop,or be a[object Object]`
` 获取博客内容
. None found on element type 博客卡片
function Blog() {
const [blogs,setBlogs] = useState([])
const [image,setImage] = useState()
const [selectedBlog,setSelectedBlog] = useState(blogs)
useEffect(() => {
fetch("http://cdn.contentful.com...")
.then(response => response.json())
.then(data =>
setBlogs(data.items)
)
},[])
console.log(blogs)
return (
<>
<div className="card-flex" >
{selectedBlog !== null ? blogs.map((blog =>
<Card title={blog.fields.title} date={blog.fields.date} introduction={blog.fields.introduction} mainBody1={blog.fields.mainBody1} mainBody2={blog.fields.mainBody2} setSelectedBlog={selectedBlog}
/>
)):
<Article title={blogs.find(d => d.fields.title === selectedBlog)} />
}
</div>
</>
)
}
export default Blog**文章**
function Card(props) {
console.log(props)
return (
<div class="container">
<div class="card">
<div class="card-header">
<img style={{backgroundImage: "url('https://i.pinimg.com/564x/7f/bb/97/7fbb9793b574c32f5d28cae0ea5c557f.jpg')"}}/>
</div>
<div class="card-body">
<span class="tag tag-teal">{props.tags}</span>
<h4>{props.title}</h4>
<p style={{fontSize:"17px",paddingTop:"10px"}} >{props.introduction}</p>
<div class="card-user">
<Link
to={{
pathname: '/article',state: {
title: props.title,introduction: props.introduction
}
}}
>
<button>read more</button>
</Link>
<div class="user-info">
<h5 >{ props.date}</h5>
</div>
</div>
</div>
</div>
</div>
)
}
export default Card版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。