問題描述

React項(xiàng)目中，想根據(jù)路由動(dòng)態(tài)修改title的值，但是寫了后，發(fā)現(xiàn)title不變。
【問題1：】這是怎么回事？
【問題2：】要如何修改？

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

百度了下，說在路由中寫一個(gè)setTitle的函數(shù)，然后根據(jù)路由采用onEnter調(diào)用setTitle方法傳title過去，即可

相關(guān)代碼

router/index.js
const setTitle = (title) => {
    document.title = title
};
export const routes = [{
    path: '/xxx1',
    title: '測試1',
    component: () => import('xxx')
},{
    path: '/xxx2',
    title: '測試2',
    component: () => import('xxx')
},{
    path: '/xxx3',
    title: '測試3',
    component: () => import('xxx')
},
...
]
const router = (props) => (
    <Router>
        <Switch>
            ...
            {routes.map(({ path, title, component }, index) => (
                <Route
                    key={index}
                    exact
                    path={path}
                    onEnter={setTitle(title)}
                    component={component}
                />
            ))}
            ...
        </Switch>
    </Router>
)

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

在瀏覽器中的標(biāo)題欄中一直顯示【測試3】，控制臺(tái)打印setTitle中的title，是打印了三次，分別是：測試1，測試2，測試3
個(gè)人分析是遍歷三次，最后一次對前面進(jìn)行了覆蓋
【問題】：那我要如何才能實(shí)現(xiàn)在不同的界面，顯示不同的title？

還各位大神請指點(diǎn)下，謝謝了