So legen Sie den Titeltitel in einem React-Projekt dynamisch fest (Code)

Der Inhalt dieses Artikels befasst sich mit dem dynamischen Festlegen des Titels (Codes) in React-Projekten. Ich hoffe, dass er für Freunde hilfreich ist.

Im mit React erstellten SPA-Projekt wird der Titel der Seite direkt in den Eintrag index.html geschrieben. Wenn die Route zwischen verschiedenen Seiten wechselt, ändert sich der Titel nicht dynamisch. Wie kann man also dafür sorgen, dass sich der Titel dynamisch ändert, wenn die Route wechselt?
1. Fügen Sie das Titelattribut hinzu, wenn Sie die Route definieren.

    {
        path: "/regularinvestment",
        component: Loadable({
            loader: () => import('./../../business/Regularinvestment/index'),
            loading: PageLoading
        }),
        title: "这是自定义的标题"
    }

2. Holen Sie sich den benutzerdefinierten Titel in der Routing-Index.js und legen Sie den Seitentitel fest.

   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}/>
        })
    };

Das obige ist der detaillierte Inhalt vonSo legen Sie den Titeltitel in einem React-Projekt dynamisch fest (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!