React Router路由无法传递Props至博客详情页问题求助

问题场景 #

搭建博客列表页，卡片包含跳转至单篇博客的链接，点击后页面可正常打开，但BlogPage组件无法获取title props展示内容。

错误原因分析 #

1. 路由配置混乱：主路由使用/blogs/*通配符路由，未定义动态参数捕获博客slug；同时在每个博客卡片中嵌套<Routes>，主路由跳转时不会识别卡片内的路由规则，导致props传递失效。
2. Props传递方式错误：通过路由element直接传递title={blog.title}仅适用于组件直接渲染场景，路由跳转后不会携带该props。

具体修改步骤 #

1. 修正主路由配置（App.jsx） #

将通配符路由改为带动态参数的路由，捕获博客slug：

<Routes>
    <Route path='/' element={<Home/>} />
    <Route path='/paslaugos' element={<Services/>} />
    <Route path='/privatumo-politika' element={<PrivacyPolicy/>} />
    <Route path='/blogs' element={<BlogList/>}/>
    {/* 改为动态参数路由，捕获slug */}
    <Route path='/blogs/:slug' element={<BlogPage/>}/>
    <Route path='*' element={<NotFound/>} />
</Routes>

2. 简化博客卡片代码 #

删除卡片内的嵌套<Routes>，仅保留跳转链接：

<>
    <div className="blog-card">
        <img src={blog.thumbnail.url} alt={blog.alt} />
        <div className="blogCardTxt pentagon">
            <h3>{blog.title}</h3>
            <p>{blog.excerpt}</p>
            <Link to={`/blogs/${blog.slug}`}>Read</Link>
        </div>
    </div>
</>

3. 修改BlogPage组件获取数据 #

有两种常用方式获取博客内容：

方式一：通过URL参数匹配数据（推荐，刷新页面不丢失）

使用useParams获取slug，再从博客数据源中匹配对应内容：

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

// 假设博客数据源（可从API或本地数据中获取）
const blogsData = [
    { slug: 'my-first-blog', title: '我的第一篇博客', excerpt: '博客简介...', thumbnail: { url: 'xxx' }, alt: '博客封面' },
    // 其他博客数据
];

const BlogPage = () => {
    const { slug } = useParams();
    const targetBlog = blogsData.find(blog => blog.slug === slug);

    return (
        <>
            <h1>Blog page loaded</h1>
            {targetBlog ? (
                <p>{targetBlog.title}</p>
            ) : (
                <p>该博客不存在</p>
            )}
        </>
    )
}

方式二：通过路由state传递数据（适合简单场景，刷新页面会丢失state）

修改卡片中的Link，通过state传递数据：

<Link to={`/blogs/${blog.slug}`} state={{ title: blog.title }}>Read</Link>

在BlogPage中使用useLocation获取state：

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

const BlogPage = () => {
    const location = useLocation();
    const blogTitle = location.state?.title;

    return (
        <>
            <h1>Blog page loaded</h1>
            {blogTitle ? (
                <p>{blogTitle}</p>
            ) : (
                <p>Loading</p>
            )}
        </>
    )
}

内容的提问来源于stack exchange，提问作者Diogen_Sin