有没有办法用React-Router v4修改页面标题？

Question

我正在寻找一种方法，当React-Router v4更改位置时修改页面标题。我曾经在 Redux 中侦听位置更改操作，并根据 metaData 对象检查该路由。

当使用React Router v4时，列表中没有固定的路由。事实上，站点周围的各个组件可以使用＜code＞路由

当某些主要路线发生变化时，是否有一种方法可以通过调用操作来更新页面标题，或者是否有更好的方法来更新站点的元数据？

Answer 1

从phen0menon的优秀答案中吸取教训，为什么不扩展Route而不是React.Component呢？

import React, { useEffect } from 'react';
import { Route } from 'react-router-dom';
import PropTypes from 'prop-types';

export const Page = ({ title, ...rest }) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
  return <Route {...rest} />;
};

这将删除开销代码，如下所示：

// old:
  <Route
    exact
    path="/"
    render={props => (
      <Page {...props} component={Index} title="Index Page" />
    )}
  />

// improvement:
  <Page
    exact
    path="/"
    component={Index}
    title="Index Page"
  />

更新：另一种方法是使用自定义挂钩：

import { useEffect } from 'react';

/** Hook for changing title */
export const useTitle = title => {
  useEffect(() => {
    const oldTitle = document.title;
    title && (document.title = title);
    // following line is optional, but will reset title when component unmounts
    return () => document.title = oldTitle;
  }, [title]);
};

Answer 2

在您的组件中，对每个页面执行此操作

componentDidMount() {
  document.title = 'Your page title here';
}

这将改变你的页面标题，对每条路线做上述操作。

此外，如果它不仅仅是标题部分，请检查react头盔，这是一个非常整洁的库，并处理一些很好的边缘情况。

Answer 3

＜代码＞

<Route
  exact
  path="/"
  render={props => (
    <Page {...props} component={Index} title="Index Page" />
  )}
/>

<Route
  path="/about"
  render={props => (
    <Page {...props} component={About} title="About Page" />
  )}
/>

在< code >页面组件中，您可以设置路线标题:

import React from "react"

/* 
 * Component which serves the purpose of a "root route component". 
 */
class Page extends React.Component {
  /**
   * Here, we define a react lifecycle method that gets executed each time 
   * our component is mounted to the DOM, which is exactly what we want in this case
   */
  componentDidMount() {
    document.title = this.props.title
  }
  
  /**
   * Here, we use a component prop to render 
   * a component, as specified in route configuration
   */
  render() {
    const PageComponent = this.props.component

    return (
      <PageComponent />
    )
  }
}

export default Page

更新1八月2019.这只适用于反应路由器

使用 React Hooks 更新了答案：

您可以使用下面的组件指定任何路由的标题，该组件是使用useEffects构建的。

import { useEffect } from "react";

const Page = (props) => {
  useEffect(() => {
    document.title = props.title || "";
  }, [props.title]);
  return props.children;
};

export default Page;

然后在路由的呈现道具中使用 Page：

<Route
  path="/about"
  render={(props) => (
    <Page title="Index">
      <Index {...props} />
    </Page>
  )}
/>

<Route
  path="/profile"
  render={(props) => (
    <Page title="Profile">
      <Profile {...props} />
    </Page>
  )}
/>