Javascript 使用React路由器配置设置页面标题

我想通过与

react router config

一起使用的配置文件设置页面标题，但我不确定最佳方法。道具？头盔

routes.js

const routes = [
    {
        title: 'Home',
        path: '/',
        exact: true,
        component: PageOne,
        name: PageOne,
    },
    {
        title: 'PageOne',
        path: '/PageOne',
        exact: true,
        component: PageOne,
        name: PageOne,
    }
]

template.js

const Template = ({ route }) => {
    return (
        <>
            <Nav route={route} />
        </>
    )
}

const模板=（{route}）=>{
返回(
)
}

nav.js

const Nav = () => {
    return (
        <div>
             <Link to="/">Home</Link>
             <Link to="/PageOne">Page One</Link>
        </div>
    )
}

const Nav=（）=>{
返回(
家
第一页
)
}

index.js

ReactDOM.render(
        <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>,
    document.getElementById('root')
)

ReactDOM.render(
{renderRoutes（routes）}，
document.getElementById（'root'））
)

如果使用客户端路由和react钩子，只需编写一个自定义钩子来设置文档标题即可

const useDocumentTitle = (title) => {
    useEffect(() => {
       document.title = title
    }, [ title])
}

并在每个组件中使用它

const PageOne = ({ title }) => {
    useDocumentTitle(title);
    return (
        <>
            {/* Your content here */}
        </>
    )
}

constpageone=（{title}）=>{
使用文档标题（标题）；
返回(
{/*您在此处的内容*/}
)
}

如果使用客户端路由和react钩子，只需编写一个自定义钩子来设置文档标题即可

const useDocumentTitle = (title) => {
    useEffect(() => {
       document.title = title
    }, [ title])
}

并在每个组件中使用它

const PageOne = ({ title }) => {
    useDocumentTitle(title);
    return (
        <>
            {/* Your content here */}
        </>
    )
}

constpageone=（{title}）=>{
使用文档标题（标题）；
返回(
{/*您在此处的内容*/}
)
}