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

Question

我正在寻找一种在 React-Router v4+ 更改位置时修改页面标题的方法。我曾经在 Redux 中监听位置更改操作，并根据 metaData object.

检查该路由

使用 React-Router v4+ 时，没有固定的路由列表。事实上，站点周围的各种组件可以使用 Route 和相同的路径字符串。这意味着我使用的旧方法将不再有效。

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

Answer 1

在您的 componentDidMount() 方法中对每个页面执行此操作

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

这将更改您的页面标题，对每条路线执行上述操作。

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

Answer 2

<Route /> 个组件有 render 属性。因此，您可以通过这样声明您的路线来在位置更改时修改页面标题：

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

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

在Page组件中可以设置路由标题：

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

2019 年 8 月 1 日更新。这仅适用于 react-router >= 4.x。感谢@supremebeing7

更新后的答案使用 React Hooks:

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

import { useEffect } from "react";

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

export default Page;

然后在路由的 render 属性中使用 Page：

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

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

Answer 3

从优秀, why not extend Route instead of 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"
  />

更新： 另一种方法是使用 custom hook：

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 4

我在 Thierry Prosts 解决方案的基础上进行了一些构建，结果如下：

2020 年 1 月更新：我现在也更新了我的组件以使用 Typescript：

2021 年 8 月更新：我已经在 TypeScript 中添加了我的私有路由

import React, { FunctionComponent, useEffect } from 'react';
import { Route, RouteProps } from 'react-router-dom';

interface IPageProps extends RouteProps {
  title: string;
}

const Page: FunctionComponent<IPageProps> = props => {
  useEffect(() => {
    document.title = "Website name | " + props.title;
  });

  const { title, ...rest } = props;
  return <Route {...rest} />;
};

export default Page;

更新： 我的 Page.jsx 组件现在是功能组件并带有 useEffect 挂钩：

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

const Page = (props) => {
  useEffect(() => {    
    document.title = "Website name | " + props.title;
  });

  const { title, ...rest } = props;
  return <Route {...rest} />;
}

export default Page;

下面是我的初步解决方案：

// Page.jsx
import React from 'react';
import { Route } from 'react-router-dom';

class Page extends Route {
  componentDidMount() {
    document.title = "Website name | " + this.props.title;
  }

  componentDidUpdate() {      
      document.title = "Website name | " + this.props.title;
  }

  render() {
    const { title, ...rest } = this.props;
    return <Route {...rest} />;
  }
}

export default Page;

我的路由器实现如下所示：

// App.js / Index.js
<Router>
    <App>
      <Switch>
         <Page path="/" component={Index} title="Index" />
         <PrivateRoute path="/secure" component={SecurePage} title="Secure" />
      </Switch>
    </App>    
  </Router>

私人路由设置：

// PrivateRoute
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Page
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

TypeScript 中的私有路由：

export const PrivateRoute = ({ Component, ...rest }: IRouteProps): JSX.Element => {
  return (
    <Page
      {...rest}
      render={(props) =>
        userIsAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: Paths.login,
              state: { from: props.location },
            }}
          />
        )
      }
    />
  );
};

这使我能够同时更新 public 区域和私人区域。

Answer 5

在 Helmet 的帮助下：

import React from 'react'
import Helmet from 'react-helmet'
import { Route, BrowserRouter, Switch } from 'react-router-dom'

function RouteWithTitle({ title, ...props }) {
  return (
    <>
      <Helmet>
        <title>{title}</title>
      </Helmet>
      <Route {...props} />
    </>
  )
}

export default function Routing() {
  return (
    <BrowserRouter>
      <Switch>
        <RouteWithTitle title="Hello world" exact={true} path="/" component={Home} />
      </Switch>
    </BrowserRouter>
  )
}

Answer 6

这是我的解决方案，它与简单设置 document.title 几乎相同，但使用 useEffect

/**
* Update the document title with provided string
 * @param titleOrFn can be a String or a function.
 * @param deps? if provided, the title will be updated when one of these values changes
 */
function useTitle(titleOrFn, ...deps) {
  useEffect(
    () => {
      document.title = isFunction(titleOrFn) ? titleOrFn() : titleOrFn;
    },
    [...deps]
  );
}

这样做的好处是只有在您提供的 deps 更改时才重新呈现。从不重新渲染：

const Home = () => {
  useTitle('Home');
  return (
    <div>
      <h1>Home</h1>
      <p>This is the Home Page</p> 
    </div>
  );
}

仅当我的 userId 更改时才重新渲染：

const UserProfile = ({ match }) => {
  const userId = match.params.userId;
  useTitle(() => `Profile of ${userId}`, [userId]);
  return (
    <div>
      <h1>User page</h1>
      <p>
        This is the user page of user <span>{userId}</span>
      </p>
    </div>
  );
};

// ... in route definitions
<Route path="/user/:userId" component={UserProfile} />
// ...

CodePen here but cannot update frame title

如果您检查框架的 <head>，您可以看到变化：

Answer 7

使用主路由页面上的功能组件，您可以使用 useEffect 在每次路由更改时更改标题。

例如，

const Routes = () => {
    useEffect(() => {
      let title = history.location.pathname
      document.title = title;
    });

    return (
      <Switch>
        <Route path='/a' />
        <Route path='/b' />
        <Route path='/c' />
      </Switch>
    );
}

Answer 8

您也可以使用 render 方法

const routes = [
 {
   path: "/main",
   component: MainPage,
   title: "Main Page",
   exact: true
 },
 {
   path: "/about",
   component: AboutPage,
   title: "About Page"
 },
 {
   path: "/titlessPage",
   component: TitlessPage
 }
];

const Routes = props => {
 return routes.map((route, idx) => {
   const { path, exact, component, title } = route;
   return (
     <Route
       path={path}
       exact={exact}
       render={() => {
         document.title = title ? title : "Unknown title";
         console.log(document.title);
         return route.component;
       }}
     />
   );
 });
};

codesandbox 处的示例（在新的 window 中打开结果以查看标题）

Answer 9

请使用react-helmet。我想举个打字稿的例子：

import { Helmet } from 'react-helmet';

const Component1Title = 'All possible elements of the <head> can be changed using Helmet!';
const Component1Description = 'No only title, description etc. too!';

class Component1 extends React.Component<Component1Props, Component1State> {
  render () {
    return (
      <>
        <Helmet>
          <title>{ Component1Title }</title>
          <meta name="description" content={Component1Description} />

        </Helmet>
        ...
      </>
    )
  }
}

了解更多：https://github.com/nfl/react-helmet#readme

Answer 10

Dan Abramov（Redux 的创建者和 React 团队的现任成员）创建了一个用于设置标题的组件，该组件也适用于新版本的 React Router。它非常易于使用，您可以在这里阅读：

https://github.com/gaearon/react-document-title

例如：

<DocumentTitle title='My Web App'>

Answer 11

我回答这个问题是因为我觉得你可以采取额外的步骤来避免组件内的重复，你可以只从一个地方（路由器的模块）更新标题。

我通常将我的路由声明为数组，但您可以根据自己的风格更改实现。所以基本上是这样的 ==>

import {useLocation} from "react-router-dom";
const allRoutes = [
  {
        path: "/talkers",
        component: <Talkers />,
        type: "welcome",
        exact: true,
    },
    {
        path: "/signup",
        component: <SignupPage />,
        type: "onboarding",
        exact: true,
    },
  ]

const appRouter = () => {
    const theLocation = useLocation();
    const currentLocation = theLocation.pathname.split("/")[1];
    React.useEffect(() => {
        document.title = `<Website Name> | 
        ${currentLocation[0].toUpperCase()}${currentLocation.slice(1,)}`
    }, [currentLocation])

   return (
     <Switch>
      {allRoutes.map((route, index) => 
        <Route key={route.key} path={route.path} exact={route.exact} />}
    </Switch>

   )

}

另一种方法是在每个 allRoutes object 中声明标题，并在此处使用类似@Denis Skiba 的解决方案。

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

Is there a way to modify the page title with React-Router v4+?

reactjs

react-router

react-router-v4

page-title

connected-react-router