javascript - 我如何在react中将路由参数值传递给我的 header 组件和页面内容组件？

我需要同时将路由参数值传递给2个组件。标头组件以及主体组件。当值无缝传递到主体时，标头不接收任何路由参数。

<BrowserRouter>
        <AppHeader />
        <Switch>
          <Route exact path="/" component={HomePage} allowed={[]} />
          <Route exact path="/DetailPage/:id" component={DetailPage} />
          <Route exact path="/DetailPage/SubDetail/:id" component={SubDetailPage} />
        </Switch>
</BrowserRouter>

这里的AppHeader是所有页面的通用名称，即。 HomePage，DetailPage和SubDetailPage。
当我进入主页时，我输入的ID必须在所有页面的页眉中显示，并且还将在DetailPage和SubDetailPage的正文中使用它。

在首页中，在捕获文本字段中的ID之后，我在click事件中调用了此方法：

navigateToDetailPage = idNumber => {
    this.props.history.push(`/DetailPage/${idNumber }`)
  }

这可以完美工作，并且在DetailPage主体中，我可以访问此内容：this.props.match.params.id

但是我还需要将相同的内容传递给AppHeader，以便在标题上显示输入的ID。我想不出一种获取价值的方法。建议plz。

我希望在AppHeader，DetailPage和SubDetailPage中都收到相同的ID。

最佳答案

最简单的方法是使用localStorage。

在HomePage中输入id时，可以将其存储在localStorage中，

localStorage.setItem('id',id);

现在，您可以从应用程序中任何地方的id访问localStorage，

navigateToDetailPage = () => {
    let idNumber = localStorage.getItem('id');
    this.props.history.push(`/DetailPage/${idNumber}`)
}