How to tell google bot that page not found in React?

Question

I have a React App with Routers, I also have 404 component, etc. But I don't know how to send 404 header to google bot.

I'mm just thinking that it's not possible due React app without SSR. Am I right?

Answer 1

If you are using Router, you can set your pages like this:

<Router>
    <Switch>
        <Route exact path = "/home" component={HomePage} />
        <Route exact path = "/sign-up" component={SignUpPage} />
        <Route exact path = "/login" component={LoginPage} />
        <Route exact path="/incorrect-login" component={IncorrectLoginPage} />
        <Route exact path = "*" component={PageNotFound} /> //404 Component
    </Switch>
</Router>

With this, you set your PageNotFound to the bottom of your router list where if the url of the React App does not correspond to any of your previous urls, then the PageNotFound route is triggered. You can just render your not found component under that page like you would for any other page in your application.

I also used exact so that the url must be exactly the same along with a Switch statement so that only a SINGLE page component can be triggered at once. The * basically just means ALL other urls besides those specified previously.

The PageNotFound is treated as kind of like a default catch statement so it's at the bottom