Add info about handling status codes on server

Author: satya164

versioned_docs/version-5.x/configuring-links.md

@@ -202,17 +202,17 @@ For example:
       Settings: 'settings',
     },
   },
-  404: '*',
+  NotFound: '*',
 }
 ```
 
-Here, we have defined a route named `404` and set it to match `*` aka everything. If the path didn't match `user/:id` or `settings`, it'll be matched by this route.
+Here, we have defined a route named `NotFound` and set it to match `*` aka everything. If the path didn't match `user/:id` or `settings`, it'll be matched by this route.
 
 So, a path like `/library` or `/settings/notification` will resolve to the following state object:
 
 ```js
 const state = {
-  routes: [{ name: '404' }],
+  routes: [{ name: 'NotFound' }],
 };
 ```
 
@@ -232,7 +232,7 @@ You can even go more specific, for example, say if you want to show a different
       },
     },
   },
-  404: '*',
+  NotFound: '*',
 }
 ```
 
@@ -260,6 +260,8 @@ const state = {
 };
 ```
 
+When doing server rendering, you'd also want to return correct status code for 404 errors. See [server rendering docs](server-rendering.md#handling-404-or-other-status-codes) for a guide on how to handle it.
+
 ## Rendering an initial route
 
 Sometimes you want to ensure that a certain screen will always be present as the first screen in the navigator's state. You can use the `initialRouteName` property to specify the screen to use for the initial screen.

versioned_docs/version-5.x/server-rendering.md

@@ -144,6 +144,63 @@ Make sure that you have specified a `title` option in your screens:
 />
 ```
 
+## Handling 404 or other status codes
+
+When [rendering a screen for an invalid URL](configuring-links.md#handling-unmatched-routes-or-404), we should also return a `404` status code from the server.
+
+First, we need to create a context where we'll attach the status code. To do this, place the following code in a separate file that we will be importing on both the server and client:
+
+```js
+import * as React from 'react';
+
+const StatusCodeContext = React.createContext();
+
+export default StatusCodeContext;
+```
+
+Then, we need to use the context in our `NotFound` screen. Here, we add a `code` property with the value of `404` to signal that the screen was not found:
+
+```js
+function NotFound() {
+  const status = React.useContext(StatusCodeContext);
+
+  if (status) {
+    staus.code = 404;
+  }
+
+  return (
+    <View>
+      <Text>Oops! This URL doesn't exist.</Text>
+    </View>
+  );
+}
+```
+
+You could also attach additional information in this object if you need to.
+
+Next, we need to create a status object to pass in the context on our server. By default, we'll set the `code` to `200`. Then pass the object in `StatusCodeContext.Provider` which should wrap the element with `ServerContainer`:
+
+```js
+// Create a status object
+const status = { code: 200 };
+
+const html = ReactDOMServer.renderToString(
+  // Pass the status object via context
+  <StatusCodeContext.Provider value={status}>
+    <ServerContainer ref={ref} location={location}>
+      {element}
+    </ServerContainer>
+  </StatusCodeContext.Provider>
+);
+
+// After rendering, get the status code and use it for server's response
+ctx.status = status.code;
+```
+
+After we render the app with `ReactDOMServer.renderToString`, the `code` property of the `status` object will be updated to be `404` if the `NotFound` screen was rendered.
+
+You can follow a similar approach for other status codes too.
+
 ## Summary
 
 - Use the `location` prop on `ServerContainer` to render correct screens based on the incoming request.