问题

Question

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

博客

import React, {useState,useEffect} from 'react'
import Article from './Article'
import Card from './BlogCards/Card'

function Blog(props) {


    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="container">
        {selectedBlog !== null ? blogs.map((blog =>
          <>
          <Card title={blog.fields.title} introduction={blog.fields.introduction} setSelectedBlog={selectedBlog} />
             </>   
        )): 
        
        <Article title={blogs.find(d => d.fields.title === selectedBlog)}   />
        }

        </div>
    )
}

export default Blog

卡片

import {Link, Route} from 'react-router-dom'
import Article from '../Article'

function Card(props) {
  
  console.log(props)
    return (
            
            <div className="container">
  <div className="row">
    <div className="col-12">
      <article className="blog-card">
        <div className="blog-card__background">
          <div className="card__background--wrapper">
            <div className="card__background--main" style={{backgroundImage: "url('https://i.pinimg.com/564x/7f/bb/97/7fbb9793b574c32f5d28cae0ea5c557f.jpg')"}}/>
              <div className="card__background--layer"></div>
            </div>
          </div>

        <div className="blog-card__head">
        </div>
        <div className="blog-card__info">
          <h5>{props.title}</h5>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque vero libero voluptatibus earum? Alias dignissimos quo cum, nulla esse facere atque, blanditiis doloribus at sunt quas, repellendus vel? Et, hic!</p>
        <Link to='/article'>
        <button >read more</button>
        </Link>
        </div>
      </article>
    </div>
  </div>
        <Route exact path="/article">
          <Article introduction={props.introduction} />
        </Route>
</div>

    )   
}

export default Card

文章

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

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

export default Article

这是我的路线设置方式：

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

Answer 1

问题

introduction 属性不会传递给 Article 中主路由器中的 Route 呈现的 App 组件。

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

您正在 Card 组件中呈现永远不会匹配的第二条路线，因为 Card 由 Blog 呈现，path='/blog' 在 "/article" 路径上呈现，因此 { {1}} 永远不会匹配（尤其是“完全”）。

解决方案

一个简单的解决方案是在路由状态中发送一个特定的 introduction 以转换到“/article”路径。

更新 Card 组件中的链接以在路由状态下发送标题和介绍。

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

从 <Route exact path="/article"> 中删除无关的 Card。

除非您有两个不同的 Article 组件，否则您可能希望从 Article 中删除另一个 Blog 组件title prop 被传递给并让主路由器呈现文章。

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

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

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

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

React-Router 渲染道具

1 个答案:

问题

解决方案