有没有办法用 React-Router v4+ 修改页面标题? [英] Is there a way to modify the page title with React-Router v4+?

问题描述

我正在寻找一种在 React-Router v4+ 更改位置时修改页面标题的方法.我曾经在 Redux 中监听位置更改操作，并根据 metaData 对象检查该路由.

I'm looking for a way to modify the page title when React-Router v4+ changes locations. I used to listen for a location change action in Redux and check that route against a metaData object.

当使用 React-Router v4+ 时，没有固定的路由列表.事实上，站点周围的各种组件都可以使用具有相同路径字符串的 Route.这意味着我使用的旧方法将不再适用.

When using React-Router v4+, there's no fixed routes list. In fact, various components around the site could use Route with the same path string. That means old method I used won't work anymore.

有没有一种方法可以通过在某些主要路由发生更改时调用操作来更新页面标题，或者是否有更好的方法来更新站点的元数据?

Is there a way I can update the page title by calling actions when certain major routes are changed or is there a better a better method to update the site's metadata?

推荐答案

在你的 componentDidMount() 方法中，为每个页面执行此操作

In your componentDidMount() method do this for every page

componentDidMount() {
  document.title = 'Your page title here';
}

这将更改您的页面标题，对每条路线执行上述操作.

This will change your page title, do the above mentioned for every route.

另外，如果它不仅仅是标题部分，请检查 react-helmet 这是一个非常简洁的库，也可以处理一些很好的边缘情况.

Also if it is more then just the title part, check react-helmet It is a very neat library for this, and handles some nice edge cases as well.

这篇关于有没有办法用 React-Router v4+ 修改页面标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！