Реагировать на изменение заголовка страницы

Question

Я знаю, что могу использовать реакцию-документ-заголовок и реактивный шлем, чтобы изменить заголовок страницы. Но у меня есть проблема.

response-document-title может установить заголовок страницы по умолчанию, например:

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

Может ли реактивный шлем сделать то же самое?

Кроме того, из примера в 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;

Здесь я установил заголовок страницы "Это демо-компонент". Таким образом, при визуализации этого компонента заголовок страницы будет изменен.

Answer 2

Просто используйте эту функцию, которую я специально создал.

1. получить местоположение href вашего URL.

2. разделить имя пути

3. используйте его в качестве динамического заголовка страницы

const basename = (path) => { return path.split("/").reverse()[1] } const pageTitle = (typeof window !== 'undefined' )?basename(window.location.href): null