Ссылка на статью подробно из списка статей, используя то же состояние / выборки

Question

Попытка отобразить содержимое одной статьи отдельно при нажатии на заголовок статьи со ссылкой в ​​списке всех статей. У меня есть код ниже, и он работает, но только если он поступает из списка, а не если я набираю весь URL-адрес специальной статьи.

ArticleList.js

<div key={article.id}>
    <Link to={{
        pathname: `/${article.slug}`,
        state: {article},
        }}>{article.headline}</Link>

    <p>{article.summary}</p>
</div>

ArticleDetail.js

class ArticleDetail extends React.Component {
  render() {
    return (
      <div id="current-article">
        <h2>{this.props.location.state.article.headline}</h2>
        <p>{this.props.location.state.article.content}</p>
      </div>
    );
  }
}

index.js

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route path="/:slug" component={ArticleDetail}/>
            // The ArticleList component is imported in "App" with <ArticleList />
            <Route exact path="/" component={App}/>
        </Switch>
    </BrowserRouter>
), document.getElementById('root'));

Использование реакции-роутера. Я уверен, что это неправильный способ достижения этого, но после нескольких часов поиска я просто не могу поверить, что такая простая вещь должна быть такой сложной. Может ли кто-нибудь указать мне правильное направление, на правильное решение, которое (предпочтительно) не требует 50 строк кода и 3 внешних библиотек?

Спасибо за ваше время и помощь.

Редактировать

Это явно не то, что мне нужно, но, возможно, было бы неплохо в перенаправлениях. Нужно ли снова получать данные из API в компоненте ArticleDetail? Как этот компонент получает $ {article.slug} из пути ссылки в компоненте ArticleList?

Answer 1

Я думаю, что лучшее решение - использовать слаг, получить информацию о статье и затем отобразить данные.

В вашем компоненте ArticleDetail прочитайте slug, используя this.props.location или this.props.match.param (или просто зарегистрируйте ваш this.props, чтобы понять, где вы можете получить параметр маршрута). После того, как вы узнаете, что такое «слаг», вы можете получить данные статьи и отобразить их.

Таким образом, вы всегда можете видеть правильные данные на своей странице ArticleDetails, как при использовании click на listItem, так и когда пользователь вводит URL.

Ошибка теперь состоит в том, что при доступе к странице, набирающей URL, у вас нет состояния в вашем props.location, потому что никто не передает его. В вашем списке у вас есть состояние, и вы можете правильно видеть ArticleDetail:

<Link to={{
    pathname: `/${article.slug}`,
    state: {article}, // <---
    }}>{article.headline}</Link>

Состояние prop (комментарий со стрелкой) будет отправлено на страницу "/: slug" только при нажатии на элемент Link.