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'));

使用react-router。我确信这不是实现此目标的正确方法，但是经过数小时的搜索，我简直不敢相信如此简单的事情必须如此复杂。有人可以向我指出正确的方向，即（最好）不需要50行代码和3个外部库的正确解决方案吗？

感谢您的时间和帮助。

编辑

这显然不是我想要的，但是在重定向中可能会很好。我是否必须在ArticleDetail组件中再次从API获取？该组件如何从ArticleList组件的链接路径名获得$ {article.slug}？

Answer 1

我认为最好的解决方案是使用弹头，获取文章信息，然后呈现数据。

在ArticleDetail组件中，使用this.props.location或this.props.match.param读取该段（或者只是记录您的this.props以了解在何处可以获取路由参数）。知道什么是“子弹”之后，就可以获取文章数据并显示它。

通过这种方式，您始终可以在ArticleDetails页面上看到正确的数据，无论是在使用clickItem还是在用户键入url时。

现在的错误是，当您访问输入URL的页面时，因为没有人传递它，所以props.location中没有状态。在列表中，您具有状态，因此您可以正确地看到ArticleDetail：

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

仅在单击链接元素时，状态道具（箭头注释）才会发送到“ /：slug”页面。

使用相同的状态/提取链接到文章列表中的文章详细信息

编辑

1 个答案: