Hello everyone , we're going to learn about two problem in React Router Link .

We all know that Link Provides declarative, accessible navigation around your application.

<Link to="/about">About</Link>

Here we discuss about two problem of Link which I face in Production server and also we're going to find a Proper solution to fix this issue.

1. Scroll to top on every transition

The issue is whenever you navigate to another page in production using Link from react-router ,its position will remain same as before. For example-There is a button on footer section of the page and its handle link property to transition to other page ,so when you will move to next page, the cursor and point of view remain same as before which is footer and not on top of page .

So here is a solution to fix that problem-

Implement ScrollToTop function using React Hooks .

ScrollToTop.js

Usage: Now import ScrollToTop file into main routing file and wrap it within Router.

2. ReactJS 404 error on page Reloading (Production Server )

Problem : The web server returns a 404 error message when we reload routing page of a production ReactJS application

npm run build will make production build for your ReactJs Application . The index.html file serves entire Application . When we access application with main url i.e <Route path="/" element={<Home/>} /> it hits index.html`` and all routing works fine . But when we move to sub url } />``` and reload after transition it reflects 404 errors.

Solution . Now we will discuss solution for different server user.

1. Apache Users

If the react application is hosted on an Apache webserver. Then you can add a .htaccess file at the root of your site and add the following snippet.

2. Nginx Users

he Nginx users can edit the server block (virtual host) configuration file and add the following snippet. This will route all the requests to the index.html file.

Conclusion

This tutorial helped you resolve some issue of Link(react router) in Production server. Here we include the solution for fixing transition to routing pages and 404 errors in Nginx and Apache hosted applications