problem description
In the React project, you want to dynamically modify the value of title according to the route, but after writing it, you find that title remains the same.
[Question1:] what"s going on?
[question 2:] how do I modify it?
the environmental background of the problems and what methods you have tried
Baidu said to write a function of setTitle in the route, and then use onEnter to call the setTitle method to pass title according to the route, then you can
related codes
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>
)what result do you expect? What is the error message actually seen?
in the browser title bar has been displayed [test 3], the console print setTitle title, is printed three times, respectively: test 1, test 2, test 3
personal analysis is traversed three times, the last time to cover the previous
[question]: then how can I achieve in different interfaces, display different title?
Please give me some advice from the great gods. Thank you