在React项目中动态设置页面标题是一个对用户交互和SEO优化都有益的功能。传统的SPA（单页应用）项目由于缺乏页面刷新，使得浏览器的title标签不会自动更新。如果希望title随着页面内容的变化而变化，需要开发者自行实现这一功能。
文章首先指出，在React项目中，默认情况下，页面的title是写在入口文件`index.html`中的，例如`<title>默认标题</title>`。当用户通过路由切换到不同的页面时，浏览器的title标签并不会自动更新，这就需要开发者在路由变化时手动更新title。
为了解决这一问题，文章提出了两种方法：
1. 在定义路由时增加title属性。这一步骤是在配置路由时额外添加一个title字段，例如：
```javascript
{
path: "/regularinvestment",
component: Loadable({
loader: () => import('./../../business/Regularinvestment/index'),
loading: PageLoading
}),
title: "这是自定义的标题"
}
```
这样，每个路由都有了自己的标题，当页面跳转到对应的路由时，就会使用这个自定义的title。
2. 在路由的`index.js`中获取到自定义的title，并设置页面标题。这一步骤是通过编写一个高阶组件（HOC）来实现的，具体代码如下：
```javascript
const RouteWithSubRoutes = route => {
return (
<Route
exact
path={route.path}
render={props => {
document.title = route.title || "默认title";
return <***ponent {...props} routes={route.routes} />;
}}
/>
);
};
export default () => {
return allRouters.map((route, i) => {
return <RouteWithSubRoutes key={i} {...route} />;
});
};
```
在这段代码中，首先定义了一个`RouteWithSubRoutes`的函数组件，它接收一个`route`对象作为参数，然后返回一个`<Route>`组件。在这个`<Route>`组件的`render`函数中，首先检查传入的`route`对象中是否有`title`属性，如果有就将浏览器title设置为该值，否则设置为默认值“默认title”。然后返回对应的子组件和子路由。
通过上述两个步骤，可以在React项目中实现页面标题的动态设置，提升用户体验，并在一定程度上优化搜索引擎的抓取效果。文章最后提到，希望这些方法能对大家有所帮助，并鼓励读者多支持。
需要注意的是，在实际应用中，开发者可能还需要考虑页面加载动画、错误处理、性能优化等因素。此外，为了确保应用的可访问性（Accessibility），在更改页面标题时，应考虑屏幕阅读器等辅助技术的兼容性。
