Reactjs 反应路由器（反应路由器dom）设置当前路由的页面标题（功能组件）？

我以为这很容易，但仍然找不到一个简单的解决办法。我只想将页面标题（和document.title）设置为我选择的指定字符串。我知道我可以访问useLocation并获取当前路径，但这不适用于逻辑人类命名。例如，我的路线可能是/new，但我希望页面的标题是“addnewthing”。 请注意，我已经为页面标题添加了一个新的道具，它似乎是添加它的合理位置（然后使用useEffect将其拉出来），但无法确定如何访问此道具

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

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

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

在我的index.js中

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

ReactDOM.render(
,
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>

{TITLE HEREEEEE}

使用

document.title=“添加新事物”。我不确定这是不是最好的办法。但是它对我很有用
使用
react头盔
动态设置标题

使用

npm安装--保存

现在，当你安装react头盔时，你只需把这个碎片放在任何地方就可以使用它

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

我希望这对您有所帮助。
我认为，基于应用程序组件实现您的目标的最佳方法是为标题使用上下文，如下所示：

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

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

首先创建标题上下文，如下所示：

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

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

const TitleContext=React.createContext（）；
const usetTitle=（）=>React.useContext（TitleContext）；
const TitleProvider=（{children}）=>{
const[title，setTitle]=useState（“这是默认标题”）；
返回(
{儿童}
);
};

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

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

const-App=（）=>{
const{title}=usetTitle（）；
返回(
{title}
);
};

在TitleProvider中包装应用程序组件，如下所示：

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

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

ReactDOM.render(
,
document.getElementById（“根”）
);

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

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

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

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

const Home=（）=>{
const{setTitle}=usetTitle（）；
React.useffect（（）=>{
setTitle（'这是主组件的可读标题'）
}, [])
返回我的家组件；
};
谢谢大家的回复，但我觉得他们中的大多数人似乎对我所要完成的任务有些过分，不需要额外的软件包。相反，我只是创建了一个查找集合，并以这种方式分配了标题。我将只有约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])

你不想用动态标题替换此处的
标题吗？@TaghiKhavari是的，但由于我还没有办法访问的标题道具，我甚至没有显示它。我将编辑它，以防其他人感到困惑。