我想通过与 react-router-config
一起使用的配置文件来设置页面标题,但我不确定最佳方法。 Prop ? Helm ?
路由.js
const routes = [
{
title: 'Home',
path: '/',
exact: true,
component: PageOne,
name: PageOne,
},
{
title: 'PageOne',
path: '/PageOne',
exact: true,
component: PageOne,
name: PageOne,
}
]
模板.js
const Template = ({ route }) => {
return (
<>
<Nav route={route} />
</>
)
}
导航.js
const Nav = () => {
return (
<div>
<Link to="/">Home</Link>
<Link to="/PageOne">Page One</Link>
</div>
)
}
索引.js
ReactDOM.render(
<BrowserRouter>{renderRoutes(routes)}</BrowserRouter>,
document.getElementById('root')
)
最佳答案
如果您正在使用客户端路由和 react 钩子(Hook),您可以简单地编写一个自定义钩子(Hook)来设置文档标题
const useDocumentTitle = (title) => {
useEffect(() => {
document.title = title
}, [ title])
}
并在每个或您的组件中使用它
const PageOne = ({ title }) => {
useDocumentTitle(title);
return (
<>
{/* Your content here */}
</>
)
}
关于javascript - 使用 React-Router-Config 设置页面标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61950801/