Блог

У меня есть приложение, которое извлекает сообщения и их теги из Firebase Firestore и использует React Router для навигации. Когда я нажимаю тег для просмотра сообщений с этим тегом (например root.com/tags/food ) отображение сообщений о еде. Если я затем щелкну другой тег (например root.com/tags/travel ) поскольку мы уже находимся на странице «теги», маршрутизатор не выполняет повторную выборку страницы. Как мне правильно это сделать? (В настоящее время я не использую Redux и предлагаемое решение, ‘componentWillRecieveProps’ теперь обесценивается). Я использую функциональные компоненты.

Настройка

У меня есть компонент TagList, который получает список (интерактивных) тегов из Firestore, компонент Feed, который показывает список сообщений, и компонент TagFeed, который показывает список сообщений при нажатии на определенный тег в компоненте TagList, при этом React Router чередует их, используя «сопоставление» сполучите тег.

Список тегов, например

 { docs amp;amp; docs.map(doc => (
     <ul key={doc.id}>
         <li>
             <button>
                  <Link to={`/tag/${doc.myTag}`}>
                      {doc.myTag}
                  </Link>
             </button>
         </li>
     </ul>
 ))}
  

TagFeed.js

 const TagFeed = ({match}) => {

    const theTag = match.params.tag;
    ....

    useEffect(() => {
        const getTags = projectFirestore.collection(collection)
            .orderBy('createdAt', 'desc')
            .where("myTag", "==", `${theTag}`)
            ....
  

Настройка маршрутизатора в App.js

 <BrowserRouter>
        <Nav/>
        <PostForm/>
        <Tags/>
        <Switch>
            <Route path="/" exact component={Feed}/>
            <Route path="/tag/:tag" exact component={TagFeed}/>
            <Route path="/" render={() => <div>404</div>}/>
        </Switch>
    </BrowserRouter>
  

Итак, каждый раз, когда нажимается тег, вызывается компонент TagFeed, и параметр из URL передается в запрос Firebase, но компонент TagFeed не вызывается снова, если мы его уже просматриваем.

Спасибо за вашу помощь.