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

Question

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

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

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

如何实现这一目标？

Answer 1

在您的 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