DEV Community

Creating 404 page in react using React Router

Paramanantham Harrison on May 08, 2019

We have learned how to create dynamic URL in react router and also we learned how to handle query params in react router and pass those values to t...
Collapse
 
tonixtuft profile image
Anton Bagdatyev (Tonix-Tuft)

How can you return a 404 status code with this SPA approach? If a URL does not effectively exists, a 404 would be more semantically correct than a 200 response code. Is there a way to achieve this somehow while using SPA?

Collapse
 
learnwithparam profile image
Paramanantham Harrison

Unless you sever rendered 404 page, it’s not possible
Will surely research more into the details on how to do it in SPA

Collapse
 
tonixtuft profile image
Anton Bagdatyev (Tonix-Tuft)

Thank you for your reply. I will too!

Collapse
 
gypsydave5 profile image
David Wickes

Pedantic question: if a server is not returning a Status Code of 404… is it still a 404 page?

Collapse
 
learnwithparam profile image
Paramanantham Harrison

No, it’s a not found page in client side route technically. It’s status code is going to be 200 since server will just route the index file and client handle the exact route.
It’s just the naming convention used by me as 404 page, it’s a not found page.

Collapse
 
jamesthomson profile image
James Thomson

Perhaps you could call it a "soft 404" whereas a servers response would be a "hard 404"?

Collapse
 
gypsydave5 profile image
David Wickes • Edited

This is really interesting to me. An artifact of the transport layer (the HTTP status code) has made it into the application layer. We're expecting the SPA to 'act' like a web browser, showing a 404 from a server when a resource (URL) is not found.

But it's not a web browser; it's a self contained JavaScript application. The artifact is actually from a completely different architectural model. Are we adding to the confusion if we start calling this error state a 404?

(I'm not trying to say there's a right way or a wrong way - I'm just trying to point out how weird this is when you think about it).

Collapse
 
learnwithparam profile image
Paramanantham Harrison

Yes that’s right. It’s a soft 404 in client side

Collapse
 
vincevegas profile image
vince vegas • Edited

Why the 404 page appearing to blog & contact router?

<BrowserRouter>

<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path="/about" component={About} />
  <Route component={NotFoundPage} />
</Switch>

<Switch>
  <Route exact path="/blog" component={Blog} />
  <Route exact path="/contact" component={Contact} />
</Switch>

</BrowserRouter>
Collapse
 
learnwithparam profile image
Paramanantham Harrison

Because you have two switch statement, the router checks the first switch and loads the default not found route

Collapse
 
vincevegas profile image
vince vegas • Edited

Also this, why the Blog & Contact doesn't appear, is there any way to have multiple providers in Routes

 <Switch>
  <AProvider>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
  </AProvider>

   <BProvider>
        <Route exact path="/blog" component={Blog} />
        <Route exact path="/contact" component={Contact} />
        <Route component={NotPage} />
    </BProvider>
</Switch>