[英]Setting Page Title with React-Router-Config
I would like to set the page titles via the config file that I'm using with react-router-config
but I'm not sure the best approach.我想通过我与
react-router-config
一起使用的配置文件设置页面标题,但我不确定最好的方法。 Props?道具? Helmet?
头盔?
routes.js路由.js
const routes = [
{
title: 'Home',
path: '/',
exact: true,
component: PageOne,
name: PageOne,
},
{
title: 'PageOne',
path: '/PageOne',
exact: true,
component: PageOne,
name: PageOne,
}
]
template.js模板.js
const Template = ({ route }) => {
return (
<>
<Nav route={route} />
</>
)
}
nav.js导航.js
const Nav = () => {
return (
<div>
<Link to="/">Home</Link>
<Link to="/PageOne">Page One</Link>
</div>
)
}
index.js index.js
ReactDOM.render(
<BrowserRouter>{renderRoutes(routes)}</BrowserRouter>,
document.getElementById('root')
)
If you are using client side routing and react-hooks, you can simply write a custom hook that sets document title如果您使用客户端路由和 react-hooks,您可以简单地编写一个自定义挂钩来设置文档标题
const useDocumentTitle = (title) => {
useEffect(() => {
document.title = title
}, [ title])
}
and use it within each or your component并在每个或您的组件中使用它
const PageOne = ({ title }) => {
useDocumentTitle(title);
return (
<>
{/* Your content here */}
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.