Reactが作成したSPAプロジェクトでは、ページのタイトルはindex.htmlエントリに直接書き込まれ、ページを使用せずにルートを切り替えても、タイトルは動的に変更されません。では、ルートが切り替わるときに、タイトルを動的にどのように変更しますか?
1.ルートを定義するときにタイトル属性を追加します。
{
path: "/regularinvestment",
component: Loadable({
loader: () => import('./../../business/Regularinvestment/index'),
loading: PageLoading
}),
title: "这是自定义的标题"
}
2.ルートindex.jsでカスタムタイトル設定ページのタイトルを取得します。
const RouteWithSubRoutes = route => {
return (
<Route
exact
path={route.path}
render={props => {
document.title = route.title || "默认title";
return <route.component {...props} routes={route.routes}></route.component>
}}
/>
);
};
export default () => {
return allRouters.map((route, i) => {
return <RouteWithSubRoutes key={i} {...route}/>
})
};