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

在所有文章列表中单击带有链接的标题时，尝试单独显示一篇文章的内容。我有下面的代码，它是有效的，但只有当我从列表中输入，而不是如果我输入整个url到spesific文章

ArticleList.js

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

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

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

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

{文章标题}
{文章摘要}

ArticleDetail.js

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

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

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

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

class ArticleDetail扩展了React.Component{
render（）{
返回(
{this.props.location.state.article.headline}
{this.props.location.state.article.content}

);
}
}

index.js

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

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

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

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

ReactDOM.render((
//ArticleList组件在“App”中导入时使用
)，document.getElementById（'root'）；

使用反应路由器。我相信这不是实现这一目标的正确方法，但经过数小时的搜索，我真不敢相信这么简单的事情会如此复杂。有人能给我指出一个正确的方向，找到一个不需要50行代码和3个外部库的合适的解决方案吗

谢谢你的时间和帮助

编辑

---

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

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

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

这样，无论是在使用click on listItem还是在用户键入url时，您都可以在ArticleDetails页面中看到正确的数据

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

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

---

当您来自url时，尝试记录this.props.location.state。我认为这是未定义的，或者“article”对象是未定义的。@PaoloDell'Aguzzo是的，除非来自列表，否则状态是未定义的。“TypeError:this.props.location.state未定义”。只想在自己的视图中显示文章的内容，以及该内容在列表组件状态中的位置。（如果这不是实现此目的的正确方法，则不显示）。您的location.state显然未定义！谁将其传递给您的组件？在列表中，情况显然是您在Link.to中传递到的状态！！好的，是的，我明白你现在想说什么。我这样做的，现在它的工作。进行了新的获取，并将url传递给slug参数，其中包含“${this.props.match.params.slug}”的详细信息。好多了，谢谢。