javascript - React 路由器在组件中抓取 URL 段

Question

我在 React 中使用一个简单的路由器

  <Router>
    <div>                   
       <Switch>
         <Route path="/" component={ Home } exact /> 
         <Route path="/contact" component={ Contact } />   
         <Route path="/:slug" component={ Post } />                       
        </Switch> 
    </div>
  </Router>

我正在使用 REST 从博客中提取帖子，并有一个名为 Post 的路由器组件用于单个博客帖子。任何与 home 或 contact 不匹配的路由都使用 post 组件。

如何获取或传递 Post 组件中的路由 slug/url 段？例如，如果 url 段/slug 是 /some-blog-post-title，我想检索它，最好使用 React Router 函数/方法(如果存在)。

Answer 1

您可以在props.match.params 对象中获取参数。要获取 :slug 参数，您可以编写 props.match.params.slug。

示例

class Post extends React.Component {
  componentDidMount() {
    this.getPost(this.props.match.params.slug);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.slug !== this.props.match.params.slug) {
      this.getPost(this.props.match.params.slug);
    }
  }

  getPost = slug => {
    // ...
  };

  render() {
    return <h2>{this.props.match.params.slug}</h2>;
  }
}