Как я могу прослушать изменение маршрута в моем основном компоненте приложения, используя пользовательский объект истории?

Question

У меня есть заголовок, который появляется на 95% страниц моего сайта, поэтому я монтирую его в своем основном компоненте приложения. Что касается остальных 5% страниц, хотя мне нужно, чтобы их не было.

Я подумал, что хороший способ сделать это - изменить состояние с true на false на основе текущего маршрута, и это состояние определит монтируется ли заголовок или нет.

Сначала я попытался использовать window.location.href в качестве зависимости useEffect, но это не сработало. Я читал о возможности прослушать историю, но получаю Cannot read property 'history' of undefined. Я думаю, что, возможно, это потому, что я использую пользовательский компонент истории, или, может быть, потому что я пытаюсь сделать это в моем основном компоненте приложения? Не уверен.

Это мой исторический объект:

import { createBrowserHistory } from 'history'; 
export default createBrowserHistory();

Я использую его в своем Router так:

<Router history={history}>

CONDITIONAL COMPONENT

  <Switch>
    ...routes
  </Switch>
</Router>

Вот как я пытаюсь слушай, где history - мой пользовательский объект истории const MyHistory = useHistory (history)

  useEffect(() => {
      return MyHistory.listen((location) => {
          console.log(`You changed the page to: ${location.pathname}`)
      })
  },[MyHistory])

Answer 1

Это то, как я контролирую каждое изменение маршрута в моем приложении. Я создал компонент, который прослушивает свойство pathname, заданное useLocation

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function AppScrollTop() {
  const { pathname } = useLocation();

  useEffect(() => {
      console.log(`You changed the page to: ${pathname}`)
  }, [pathname]);

  return null;
}

Затем я помещаю компонент в <Router>

<BrowserRouter>
   <AppScrollTop />
   <Switch>
     <Route path="/login" component={Login} />
   </Switch>
</BrowserRouter>

I надеюсь, это поможет.

Answer 2

Вы пытаетесь использовать useHistory внутри компонента, который отображает Router, который является провайдером. Чтобы использовать Историю для Работы, ей нужно иметь Маршрутизатор выше в иерархии.

Таким образом, либо вы оборачиваете компонент приложения с помощью Router, например

export default () => (
    <Router history={history}><App /><Router>
)

, либо, поскольку вы определяете собственную историю, вы можете использовать ее напрямую, не используя useHistory

useEffect(() => {
      return history.listen((location) => {
          console.log(`You changed the page to: ${location.pathname}`)
      })
  },[])