Reactjs 反应路由器渲染道具

我正在为我的项目使用react路由器，我需要将单独的道具（介绍）呈现给另一个可以通过我的卡组件访问的组件。目前，每张卡片都有一个博客的标题，当点击“阅读更多”按钮时，我希望文章页面显示每个博客的介绍，但没有显示任何内容

博客

import React，{useState，useffect}来自“React”
从“./Article”导入项目
从“./BlogCards/Card”导入卡
功能博客（道具）{
const[blogs，setBlogs]=useState（[]）
const[image，setImage]=useState（）
const[selectedBlog，setSelectedBlog]=useState（blogs）
useffect（（）=>{
取回（“http://cdn.contentful.com...")
.then（response=>response.json（））
。然后（数据=>
日志（数据项）
)
}, []) 
console.log（博客）
返回(
{selectedBlog！==null？blogs.map（（blog=>
)): 
d、 fields.title==selectedBlog）}/>
}
)
}
导出默认博客

卡片

从'react router dom'导入{Link，Route}
从“../Article”导入文章
功能卡（道具）{
控制台日志（道具）
返回(
{props.title}
Lorem ipsum dolor sit，amet Concertetur Adipiscing Elite。Doloremque vero libero Volupatibus earum？别名尊严，无脸，在sunt quas，blanditiis doloribus，Determindus vel？Et，hic

阅读更多
)   
}
导出默认卡

文章

import React from 'react'
import './Article.css'

function Article(props) {
console.log(props)
    return (
        <div>
             <p>{props.introduction}</p>
        </div>
    )
}

export default Article

从“React”导入React
导入“./Article.css”
功能文章（道具）{
控制台日志（道具）
返回(
{props.introduction}

)
}
导出默认项目

以下是我的路线设置方式：

<Route path='/blog'>
 <Blog />
</Route> 
<Route path='/article'>
  <Article />
</Route> 

问题

简介

道具不会传递给

应用程序中主路由器中的
路由
呈现的
文章
组件

<Route path='/article'>
  <Article /> // <-- no extra props
</Route>

从
卡
中取出多余的

除非您有两个不同的
文章
组件，否则您可能希望从
博客
中删除另一个
文章
组件，并将
标题
道具传递给它，让主路由器呈现文章

在
Article
中，使用
useLocation
React钩子访问路由状态

<Link
  to={{
    pathname: '/article',
    state: {
      title: props.title,
      introduction: props.introduction
    }
  }}
>
  <button>read more</button>
</Link>

import { useLocation } from 'react-router-dom';

function Article(props) {
  const { state = {} } = useLocation();

  return (
    <div>
      <p>{state.introduction}</p>
    </div>
  )
}

从'react router dom'导入{useLocation}；
功能文章（道具）{
const{state={}}=useLocation（）；
返回(
{国家介绍}

)
}
我们需要了解您是如何设置路线的，以及
Blog
是如何呈现的。如果您正在导航到
“/article”
，则可能不再位于呈现父组件的路径上，因此将不再装载呈现
article
的嵌套路径。我编辑了我的问题。路由是在App.jsAm i rendering Article中设置的。在错误的位置？@shubadillahi是的，除非您有其他范围内的值要作为道具传递给
Article
from
App
，否则博客值将以路由状态发送。我注意到你在一些地方渲染了一篇
文章
组件，我更新了我的答案，建议只渲染主路由器/路由的单个组件。如果问题仍然存在，您可以尝试创建一个运行的代码沙盒，我们可以看看吗？是的，另一篇文章是一个错误，它现在工作得很好，谢谢
<Link
  to={{
    pathname: '/article',
    state: {
      title: props.title,
      introduction: props.introduction
    }
  }}
>
  <button>read more</button>
</Link>

import { useLocation } from 'react-router-dom';

function Article(props) {
  const { state = {} } = useLocation();

  return (
    <div>
      <p>{state.introduction}</p>
    </div>
  )
}