反应改变页面标题

Question

我知道我可以使用 react-document-title and react-helmet 来更改页面标题。但是我有一个问题。

react-document-title 可以设置默认页面标题如：

function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

可以react-helmet做同样的事情吗？

此外，从github中的例子来看，两者都使用了静态标题。他们可以像 youtube 那样标题不是静态的吗？

如果您在 youtube 主页，页面标题显示 Youtube。
如果您正在观看视频，页面标题会显示带有 -youtube.

的视频名称

很明显，- youtube是静态的，视频的名字是动态的。

目标是我想在router.js中设置默认标题（如react-document-title），然后如果组件需要标题（默认标题加上组件的页面标题），更改页面标题。如果不需要，则使用此代码使用默认标题：

function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <Router path="/" component={Home} />
    </DocumentTitle>
  );
}

function HomePage() {
  // Use "Home" while this component is mounted
  return (
    //trying to do something like this
    <DocumentTitle title='${default title } -Home'>
      // output: My Web App - Home
      <h1>Home, sweet home.</h1>
    </DocumentTitle>
  );
}

你能举个例子吗，因为我需要它来理解这个？

Answer 1

您可以尝试document.title按照下面的代码更改页面标题。

import React from 'react';

const DemoComponent= () => {
  document.title = "This is demo Component";
  return (
    <div className="container">
      <div className="row">
        <h1> My Component</h1>
      </div>
    </div>
  );
}

export default DemoComponent;

这里我设置了页面标题"This is demo Component"。所以，当这个组件被渲染时，页面的标题将会改变。

反应改变页面标题

react changing page title

react-router

react-helmet