Adding Navigation In React SSR

Adding Navigation In React SSR

Anil Verma's photo
Anil Verma
·Dec 25, 2020·

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Part 2 of Server Side Rendering with React

Please Go through with above mentioned link before reading below setup. It is part 2 of Server Side Rendering with React

Adding Navigation in React App with SSR is very simple. As a React Developer, you know that BrowserRouter Needed for Routing but on server side BrowserRouter will not work. So We have StaticRouter on Server side and BrowserRouter for Client side.

  1. Go to index file and make following change

Express as server will not handle our routing logic. it will pass all incoming requests to React and React will handle all request.

2. Create a Routes.js file inside client folder

This will we shared file. it will be used for server side loading and hydration on browser(React Side).

3. Now change renderer.js file like

So, Same as React, we have to wrap routing with StaticRouter to work perfectly on server side. context is required property of StaticRouter , So on initial setup, we can assign it with blank OBJ. Location props is optional for initial setup.

4. Change Client.js file

By Doing this changes , Routing will be enabled. Enjoy React Coding…

 
Share this