Реагируйте: Как пройти в реквизит от на React Router?

Question

Я работаю с Hacker News API и теперь могу ссылаться на свой Comments.js с идентификатором истории в URL-адресе, например так:

export default function Story ({storyID}) {

const [story, setStory] = useState({});

 useEffect(()=> {

    getStoryTitle(storyID).then(data => data && data.url && setStory(data));
 });

    const kids = story.kids ? story.kids: [];
     const author = story.by;
        return (

          <div className="story-wrapper">

             <a className="a-tag" href={story.url}>
               <p className="story-title">{story.title}</p>
             </a>
             <p className="story-author"><strong>By: {story.by}</strong> on {timeFormat(story.time)}</p>
             <p className="story-comments"><Link to={`/comments/${storyID}`}>{kids.length}</Link> Comments</p>
             {

РЕДАКТИРОВАТЬ: у меня есть Comments.js, как это

    import React, {useState, useEffect} from 'react'
import {getStoryTitle} from '../API.js'
const {comment}
export default function Comments({storyID}) {
    const [comment, setComment] = useState({});


    useEffect(()=> {
        getStoryTitle(storyID).then(data => setComment(data))
    }, [])

    return (
        <ul>
            <li>{storyID}</li>
        </ul>
    )
}

Мне нужно знать, как я могу отобразить данные в моем Comments.js компоненте, аналогично тому, как я делаю с заголовком и автором истории, используя реквизит, который передается в URL.

Answer 1

match

Учитывая, что маршрут маршрута комментариев определен как path="/comments/:commentId", доступ к идентификатору можно получить из match prop.

this.props.match.params.commentId

location

Если вам нужно отправить состояние с маршрутом pu sh, оно отправляется в опоре to ссылки как объект, определяющий pathname и state для отправки новый маршрут.

to={{ pathname: `/comments/${storyID}`, state: { data } }}

Доступ из location проп.

this.props.location.state.data

data может быть любым допустимым в качестве полезной нагрузки объекта

edit

Предполагается, что Comments отображается так:

<Route path="/comments/:id" component={Comments} />

Затем распакуйте id из полученной match реквизита:

import React, { useState, useEffect } from 'react';
import { getStoryTitle } from '../API.js';

export default function Comments({ match }) {
  const { id } = match.params;
  const [comment, setComment] = useState({});

  useEffect(()=> {
    getStoryTitle(id).then(data => setComment(data));
  }, []);

  return (
    <ul>
      <li>{id}</li>
    </ul>
  );
}

Answer 2

<Link to={{
  pathname: `/comments/${storyID}`,
  state: {
    yourData: 'fooBar'
  }
}}>{kids.length}</Link>

и внутри вашего компонента вы хотите визуализировать данные:

const { yourData} = this.props.location.state