如何更改导航栏中的页面标题
How to change page title in navigation bar
我想根据内容更改导航栏中的文本。
在我的 App.jsx 文件中，我有我的路线和导航栏。跟随路线应该相应地更改它的文本。
将导航栏复制到每个组件的快速而肮脏的解决方案肯定会奏效，但我相信还有其他方法。
正如A先生所说，您可以让您的Navbar组件通过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
我想根据内容更改导航栏中的文本。
在我的 App.jsx 文件中，我有我的路线和导航栏。跟随路线应该相应地更改它的文本。
将导航栏复制到每个组件的快速而肮脏的解决方案肯定会奏效，但我相信还有其他方法。
正如A先生所说，您可以让您的Navbar组件通过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