Question

使用React Router时，如何在路由页面时更改其他组件的状态？

例如，我的应用程序结构如下：

Header
==Link1 Link2==
Footer: "You are now at Home", button1, button2

当用户路由到Link1时，我想更新页脚的状态，以便它知道它当前在link1上。例如，页脚是一个工具栏，在Link1上将禁用某些按钮，但所有按钮都将在Link2和Home上可用。像这样：

==Header==
==Link1 Link2==
==Content of Link1==
Footer: "You are now at Link1", button2

我能想到的解决方案是将链接的页脚和内容包装成一个大的单个组件，并设置到整个组件的路由。但是我不确定这是不是一个好习惯，因为我认为这有点打败了“页脚”的目的。

另一个想法是，也许我可以在路由运行时更改页脚组件的状态，因此页脚将在必要时重新呈现。因此，<Footer />组件位于主要内容之外，与<Header />在同一级别上。但是，我不知道该怎么做。

有没有更好的方法来实现这一目标？

以下是CodeSandbox上的代码段，我希望它可以更好地说明我的问题。

CodeSandbox demo

Answer 1

一种方法是在Footer上使用withRouter HOC，以便在路线更改时收到道具。

代码更改

import { BrowserRouter, Route, Link, withRouter } from "react-router-dom";

然后

<BrowserRouter>
  <div>
    <Route path="/" exact component={Home} />
    <Route path="/section1" component={SectionOne} />
    <WrappedFooter />
  </div>
</BrowserRouter>

然后

const WrappedFooter = withRouter(Footer);

您现在可以使用页脚内的this.props.location.pathname从路由器访问当前匹配的路由。您应该使用交换机中的实际路径让文字， {location} = this.props

switch (location.pathname) {
  case '/': {
    text = 'Home'
    break
  }
  case '/section1': {
    text = 'Section One'
    break
  }
}

https://codesandbox.io/s/8y051k9qoj

React Router - 更改其他组件的状态

1 个答案: