如何根据使用 React 的路由更改单独标题组件上的页面标题？答案

【问题标题】：How to change page title on separate header component depending on route with React?如何根据使用 React 的路由更改单独标题组件上的页面标题？
【发布时间】：2019-05-15 00:31:04
【问题描述】：

我正在使用 React，并且我的项目结构是一种布局组件，然后是主页组件。我想根据用户到达的路线更改标题组件中页面的标题。

这是我的 App.jsx：

import React, { Suspense, lazy, Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Header from './layout/Header.jsx';
import Footer from './layout/Footer.jsx';

const  Home = lazy(() => import('./pages/Home.jsx'));
const  Weather = lazy(() => import('.pages/Weather.jsx'));
const  Encryption = lazy(() => import('./pages/Encryption.jsx'));
const  Video = lazy(() => import('./pages/Video.jsx'));

class App extends Component {
render() {
    return (
        <Router>
            <>
                <Header/>
                <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/weather" component={Weather}/>
                    <Route path="/encryption" component={Encryption}/>
                    <Route path="/video" component={Video}/>
                </Switch>
                </Suspense>
                <Footer/>

            </>
        </Router>
    );
}
}

export default App;

我的 Header.jsx 组件是这样的：

import React, { Component } from 'react';

class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <h1>Page Title</h1>
    );
  }
}

export default Header;

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const path = this.props.location.pathname.slice(1);
    return (
      <div>
        <h1>{path}</h1>
      </div>
    );
  }
}

export default withRouter(Header);

这里的工作示例：https://codesandbox.io/s/zl3y72k0pp

【讨论】：

感谢您提供简单的解决方案。我的代码有点问题。知道为什么它一直说object 类型的Warning: Failed prop type: Invalid prop component` 提供给Route，预计function。在App`中的Route（由App创建）？
感谢您所做的一切！万一有人遇到与我评论中的问题类似的问题； this fixed it for me.

【解决方案2】：

thre HOC withRouter 将为您的组件提供 match、location 和 history 属性。

那么你可以使用location.pathname 来管理你的组件的渲染

【讨论】：