реагировать роутер получить реквизит в родительском

Question

Давайте возьмем этот базовый c шаблон

export default function App() {
  return (
    <Router>
       <Header />
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
    </Router>
  );
}

Нет проблем с доступом props.match из About или Users.

Я хотел бы получить доступ с Header, используя withRouter, у меня props.match.path всегда равно /, я хотел бы, чтобы путь был /user, например, когда я в компоненте Users.

Я бы изменить мой заголовок рендеринга в функции props.match.params элементов

Answer 1

я пробовал разные способы обработки компонентов заголовка

Я решил создать повторно используемый компонент заголовка и импортировать его на все страницы. Например:

const About = () => {
  return (
    <>
      <Header title="test" />
      <div>About</div>
    </>
  )
}

const Users = () => {
  return (
    <>
      <Header title="users" rightCorner={<Notifications />} />
      <div>Users</div>
    </>
  )
}

Это может помочь настроить заголовок для каждой страницы, и у вас будет доступ к правильному расположению и параметрам внутри заголовка

Answer 2

Я думаю, что вы ищете это defind по props.location.pathname

пример: https://github.com/zero-to-mastery/visual-music/blob/development/src/components/TopNav/TopNav.js