反应路由器（react-router-dom）从当前路由（功能组件）设置页面标题？

Question

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

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

主要目标：如果有人直接点击 URL '/new'，你会如何设置标题？

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

在我的index.js

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

app.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

在您的 CreateQuiz 组件上使用 document.title = "Add New Thing";。我不确定这是否是最好的方法。但对我有用

Answer 2

使用react-helmet动态设置标题

使用

安装

npm install --save react-helmet

现在安装react-helmet后，只需将此片段放在任何地方即可使用

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

示例方法

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

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} />
   )} />
)

希望对您有所帮助。

Answer 3

我认为根据您的 App 组件完成您想完成的事情的最佳方法是为您的标题使用上下文，如下所示：

首先像这样创建标题上下文：

const TitleContext = React.createContext();
const useTitle = () => React.useContext(TitleContext);

const TitleProvider = ({ children }) => {
  const [title, setTitle] = useState("THIS IS DEFAULT TITLE");

  return (
    <TitleContext.Provider value={{ title, setTitle }}>
      {children}
    </TitleContext.Provider>
  );
};

然后你需要稍微改变你的应用程序组件

const App = () => {
  const { title } = useTitle();

  return (
    <div className="quiz-app-row">
      <SideBarNav />
      <div className="quiz-app-col">
        <h1>{title}</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>
  );
};

也像这样将您的 App 组件包装在 TitleProvider 中：

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

最后您可以像这样在组件中设置标题

const Home = () => {
  const { setTitle } = useTitle();

  React.useEffect(() => {
    setTitle('This is human readable title for Home Component')
  }, [])

  return <div>I'm Home Component</div>;
};

Answer 4

感谢大家的回复，但我觉得他们中的大多数似乎对我想要完成的事情来说有点矫枉过正，而且不需要额外的包。相反，我只是创建了一个查找 collection 并以这种方式分配了标题。我总共只有 ~7 个链接，所以这似乎是可以管理的。

const [pageTitle, setPageTitle] = useState('Home');

  const titleMap = [
    {path: '/', title:'Home'},
    {path: '/manage', title:'Manage'},
    {path: '/new', title:'New Quiz'}
  ]

  let curLoc = useLocation();
  useEffect(() => {
    const curTitle = titleMap.find(item => item.path === curLoc.pathname)
    if(curTitle && curTitle.title){
      setPageTitle(curTitle.title)
      document.title = curTitle.title
    }
  }, [curLoc])

反应路由器（react-router-dom）从当前路由（功能组件）设置页面标题？

react router (react-router-dom) setting page title from current route (functional components)?

page-title

reactjs

react-router

react-router-dom