تفاعل مقطع عنوان URL الخاص بالاستيلاء على جهاز التوجيه في المكون

1

أنا أستخدم جهاز توجيه بسيط في React

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

أقوم بسحب المنشورات من مدونة باستخدام REST ولدي مكوّن جهاز توجيه يسمى Post for post blog posts. أي مسار لا يتطابق مع home أو contact ، يستخدم post مكون.

كيف يمكنني الحصول على أو تمرير مقطع slug / url في مكون النشر؟ على سبيل المثال إذا كان مقطع / slug url هو /some-blog-post-title ، أريد استرجاعها ، ويفضل استخدام وظيفة / طريقة React Router إذا كانت موجودة.

1 إجابة

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>;
  }
}
:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام