reactjs - react router (react-router-dom) 从当前路由(功能组件)设置页面标题？

Question

我认为这很容易，但仍然找不到简单的解决方案。我只想将页面标题(和 document.title)设置为我选择的指定字符串。我知道我可以访问 useLocation 并获取当前路线，但这不适用于合乎逻辑的人类命名。例如，我的路线可能是/new 但我希望页面的标题是“添加新事物”。请注意，我为页面标题添加了一个新的 Prop ，这似乎是添加它的合乎逻辑的地方(然后使用 useEffect 来拉它)，但无法弄清楚如何访问这个 Prop 。

如果这不是正确的方法，您会怎么做？我是否应该为当前 url(useLocation) 设置一个字典/查找并分配一个人工页面标题？

主要目标:如果有人直接点击 URL“/new”，您将如何设置标题？

我当前的结构来自一个基本的 create React 应用程序。

在我的 index.js 中

ReactDOM.render(
    <React.StrictMode>
      <Router>
        <App />
      </Router>
    </React.StrictMode>,
    document.getElementById('root')
);

应用程序.js

<div className="quiz-app-row">
        <SideBarNav />
        <div className='quiz-app-col'>
          <h1>{TITLE HEREEEEE}</h1>
          <Switch>
            <Route exact component={Home} path="/" title='home' />
            <Route exact component={Example} path="/manage" title='example' />
            <Route exact component={CreateQuiz} path="/new" title='New Quiz' />
          </Switch>
        </div>
      </div>

Answer 1

使用react-helmet动态设置标题

使用安装

npm install --save react-helmet

现在当你安装 react-helmet 时，你可以通过简单地将这个片段放在任何地方来使用它

import {Helmet} from "react-helmet";
...
<Helmet>
    <title>My title</title>
</Helmet>

示例方法

您可以在不同的文件中创建自己的路由变体

import React from "react";
import {Helmet} from "react-helmet";

const RouteWithTitle = ({ component: Component, title, ...rest}) => (
   <Route {...rest} render={(props)=> (
       <Helmet>
           <title>{title}</title>
       </Helmet>
       <Component {...routeProps} />
   )} />
)

希望对您有所帮助。