如何在React Router 4中实现动态路由？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有这样的文章列表：

<div>
   {
       this.props.articles.map(article => {
            return (
                <ArticleCard key={article._id} article={article} />
            )
        })
    }
</div>

在ArticleCard组件中，我仅显示文章标题。我想链接到它，它将创建新的URL，例如“ article-title”并显示内容。

如何实现呢？

回答：

在您的服务器中ArticleCard，您必须创建一个Link将路由到您的完整主机Article。这个环节将包括id你试图渲染的文章（前。articles/${article._id}）

通过Route将组件的路径编写Article为articles/:id，这将使我们能够捕获渲染id时的Article内容（可通过访问this.props.match.params.id）

然后，假设id用于从一些其他的API获取的文章，一个好地方调用这将是componentDidMount你的Article组件。

这是一个小示例，可能会对您有所帮助：

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom'
const ParamsExample = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={ArticleList} />
      <Route path="/articles/:id" component={Article} />
    </Switch>
  </Router>
)
const article = {
  _id: 1,
  title: 'First Article'
};
const ArticleList = () => (
  <div>
    <ArticleCard key={article._id} article={article} />
  </div>
);
const ArticleCard = ({ article }) => (
  <div>
    <h2>{article.title}</h2>
    <Link to={`/articles/${article._id}`}>SEE MORE</Link>
  </div>
);
class Article extends React.Component {
  componentDidMount() {
    console.log('Fetch API here: ', this.props.match.params.id);
  }
  render() {
    return (
      <div>
        {`Fetching...${this.props.match.params.id}`}
      </div>
    );
  }
}
export default ParamsExample

以上是 如何在React Router 4中实现动态路由？ 的全部内容， 来源链接： utcz.com/qa/414718.html

回到顶部