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

【问题标题】：How to achieve Dynamic routing in React Router 4?如何在 React Router 4 中实现动态路由？
【发布时间】：2017-11-12 06:07:05
【问题描述】：

我有一个这样的文章列表：

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

在 ArticleCard 组件中，我只显示文章的标题。我想添加一个链接，该链接将创建新的 URL，如“文章标题”并显示内容。

如何做到这一点？

【问题讨论】：

如果我的理解正确，您希望每张卡片都有一个链接，例如：/articles/article-title，它将路由到将呈现article-title 内容的Article 组件？（其中article-title 是一个动态字符串）
是的，文章标题是动态字符串
这个“内容”在哪里？我假设这是一个单独的 API 调用，使用 article-title 作为查询？
是的，内容将是另一个api调用，使用article._id来渲染另一个组件。
现在问题出在哪里？你读过文档吗？使用<Link to="/article1">Article1</Link> 和<Route path="/:id" component={articleDetail}/>

标签： reactjs react-router

【解决方案1】：

在您的ArticleCard 中，您必须创建一个Link，它将路由到您的完整Article。此链接将包含您尝试呈现的文章的id（例如articles/${article._id}）

通过将组件Article 的Route 路径写为articles/:id，这将允许我们在呈现Article 时捕获id（可通过this.props.match.params.id 访问）

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

这里有一个小例子可以帮助你：

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

【讨论】：