How do I setup for Each page custom META and related Information for the Page with ReactJS Router

Question

I'm new to ReactJS, And I have set up my new project using Router and added few pages, so my question is how can I set up different head meta and other tags for each custom page. And will this render by Google and show my pages to Google as normal page?

Answer 1

you can set meta and other tags with react-helmet.

Install from here https://www.npmjs.com/package/react-helmet

Suggestion ->Create one component and set with props.

Something like this

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/" />
            </Helmet>
            ...
        </div>
    );
  }
};