Reactjs 根据呈现的页面反应更改导航栏标题

我将此BrowserRouter组件作为顶级组件，其状态为标题字符串。这个组件呈现一个NavigationComponent，它基本上是一个导航栏，在那里我想设置一个标题，它根据我在站点上的位置而变化

组件大致如下所示

  changeTitle(title) {
    this.setState({
      title: title,
    })
  }

  <BrowserRouter>
    <div>
      <NavigationComponent title={this.state.title}/>
      <Switch>
        <Route exact path="/" render={(props) => (
          <App {...props} changeTitle= {this.changeTitle.bind(this)}/>
        )} />
        <Route exact path="/login" component={LoginComponent }/>
        <Route exact path="/logout" component={LoginComponent }/>
      </Switch>
    </div>
  </BrowserRouter>

在Overview组件中，这是我第一次实际调用changeTitle函数

---

我现在的问题是：有没有更聪明的方法来实现这一点，而不必将方法changethile传递给每个孩子？在OverviewComponent之后调用的组件还有很多，这些组件也需要更改标题。

在您的NavigationComponent中，我认为在您导航到另一个页面时，有一个事件监听器来检查事件将更有意义。 看起来您已经在使用react router dom，所以这是完美的

您需要使用react router dom中的withRouter HOC包装您的组件。这将使我们能够访问历史道具，它有一个事件侦听器方法。我们可以在componentDidMount中创建事件侦听器，使其始终处于活动状态

import { withRouter } from "react-router-dom"

class NavigationComponent extends React.Component{
   state = {
      title: "Home"
   }

   changeTitle = (newTitle) => {
      this.setState({
          title: newTitle
      })
   }

   componentDidMount(){
    //listens for any route changes
    this.props.history.listen(() => {
        this.changeTitle(window.location.pathname) <-- this can be whatever value you want.
    })
   }

   render(){
      <div>{this.state.title}</div>
   }
}

export default withRouter(NavigationComponent)

---

这似乎比必须从另一个组件传入值要直观得多。

在您的NavigationComponent中，我认为在您导航到另一个页面时，有一个事件监听器来检查事件更为合理。 看起来您已经在使用react router dom，所以这是完美的

您需要使用react router dom中的withRouter HOC包装您的组件。这将使我们能够访问历史道具，它有一个事件侦听器方法。我们可以在componentDidMount中创建事件侦听器，使其始终处于活动状态

import { withRouter } from "react-router-dom"

class NavigationComponent extends React.Component{
   state = {
      title: "Home"
   }

   changeTitle = (newTitle) => {
      this.setState({
          title: newTitle
      })
   }

   componentDidMount(){
    //listens for any route changes
    this.props.history.listen(() => {
        this.changeTitle(window.location.pathname) <-- this can be whatever value you want.
    })
   }

   render(){
      <div>{this.state.title}</div>
   }
}

export default withRouter(NavigationComponent)

这似乎比必须从另一个组件传入值更直观。

检查window.location.pathname并将pathname设置为导航栏标题

选中window.location.pathname并将路径名设置为导航栏标题

---

听起来很有希望，但是我认为我的道路越深，我就越需要管理和扩展这个方法，克里斯托弗的想法听起来对我来说更容易实现。但是谢谢你的邀请suggestion@Pio路径名='/questions/101/react change/213'。然后，title=window.location.pathname.split'/'[1]将分配问题sunds很有希望，但是a我认为我的路径越深，我就越需要管理和扩展这个方法，christopher的想法听起来对我来说更容易实现。但是谢谢你的邀请suggestion@Pio路径名='/questions/101/react change/213'。然后，title=window.location.pathname.split'/'[1]将分配questions@Pio我才意识到这可能行不通。但我有一个更好的解决方案给你。你现在正在测试这个吗？是的，正在尝试，但还没有成功。我正在尝试定义一个自定义事件，我在OverviewComponent的didmount函数中引发了该事件，该函数刚刚更新了我的解决方案。这应该会让它起作用。因此，我不确定您是否真的需要概览组件。overview组件只是将标题值传递给导航栏吗？我的应用程序由许多模块组成，满足不同的需求。overview组件将显示所有可用的模块，并允许用户导航到它们。概述公司标题将为概述。当导航到模块1时，标题将发生更改，并从此处进一步扩展。i、 模块1-仪表板-项目1…您的应用程序的复杂性远远超过我的预期。祝你好运！在任何情况下，我认为我上面写的内容应该足以满足您在路线更改时在导航栏上显示新标题的需要。@Pio我刚刚意识到这可能不起作用。但我有一个更好的解决方案给你。你现在正在测试这个吗？是的，正在尝试，但还没有成功。我正在尝试定义一个自定义事件，我在OverviewComponent的didmount函数中引发了该事件，该函数刚刚更新了我的解决方案。这应该会让它起作用。因此，我不确定您是否真的需要概览组件。overview组件只是将标题值传递给导航栏吗？我的应用程序由许多模块组成，满足不同的需求。overview组件将显示所有可用的模块，并允许用户导航到它们。概述公司标题将为概述。当导航到模块1时，标题将发生更改，并从此处进一步扩展。i、 模块1-仪表板-项目1…您的应用程序的复杂性远远超过我的预期。祝你好运！在任何情况下，我认为我上面写的内容应该足以满足您在路线更改时在导航栏上显示新标题的需要。

// Navbar.js
changeTitle = () => {
  switch(window.location.pathname){
    case '/profile':
      return 'Profile';
    case '/admin':
      return 'Admin';
    default:
      return 'Dashboard';
  }
}
render(){
 let title = changeTitle();
  return(<div>{title}</div>)
}