Reactjs 如何在导航栏中更改页面标题

我想根据内容更改导航栏中的文本

在我的App.jsx文件中，我有我的路线和导航栏。遵循路线应该相应地更改其文本

---

简单地将导航栏复制到每个组件中的快速而肮脏的解决方案肯定会奏效，但我相信还有其他方法。

正如A先生所说，您可以通过useLocation或useParams打开当前页面的导航栏组件查询，并有条件地显示不同的信息。 这可以通过拥有一个对象数组来实现，您可以在其中存储给定页面的给定文本，例如

NAVBAR_TEXTS = [{page:"/", text: "Main page"}, {page:"/info", text: "Info page"}]

等等。 那么导航栏中的文本将是

const location = useLocation();

const textToShow = NAVBAR_TEXTS.find(el => el.page === location.pathname)?.text

---

如果您使用的是

react router

，则可以使用

useLocation

和

useParams

挂钩。请在此链接中阅读更多内容：