Question

让我们使用这个基本模板

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

我认为您要搜索的内容在props.location.pathname下被忽略

示例：https://github.com/zero-to-mastery/visual-music/blob/development/src/components/TopNav/TopNav.js

Answer 2

我尝试了不同的方式处理标头组件

我决定创建可重复使用的Header组件并将其导入所有页面。这样：

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

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

为每个页面自定义页眉可能会有所帮助，您将可以访问页眉中的正确位置和参数

反应路由器在父母中获得道具

2 个答案: