Setting Page Title with React-Router-Config

Question

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. Props? Helmet?

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} />
        </>
    )
}

nav.js

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

index.js

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

Shubham Khatri · Accepted Answer · 2020-05-22 09:07:02Z

3

If you are using client side routing and react-hooks, you can simply write a custom hook that sets document title

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 */}
        </>
    )
}

answered May 22, 2020 at 9:07

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting Page Title with React-Router-Config

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related