Adding Navigation In React SSR
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.
- 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…
