In this article, you will learn how to fix the react-router URL that doesn't work when refreshing or writing. You will learn six approaches to fixing the issue. Read the complete article to know how the react-router URL works.

2. How to Fix React Router URL Doesn’t Work When
Refreshing or Writing
New tools can regularly be released with different frameworks and
libraries. Because of that, web developers find it challenging to choose
the right one for the project. React is the most popular front-end
development framework in the web development landscape.
React Router is an important application programming interface in the
react app. Current code can be created with react-router 3 and utilize
dynamic routing. Bosc Tech has wide team of React developers, who
are proficient in providing technical solution to you problems. Hire
React developer from Bosc Tech to build dynamic web applications as
per your requirements.

3. React Router is important for developing a single-page web application
with navigation without the page refreshing when a user navigates. API
utilizes component structure to call components that show the relevant
information. Check out the guide on force react components to
rerender without calling the set state to learn more about component
rerendering.
Whether the router URL does not work when refreshing the browser
and entering manually shows that you failed to configure the path on
the server. You must point the entire URL to the index.html file with the
help of .htaccess. Professional support is essential to fix issues quickly
and load the app.

4. Things to focus on fixing the problem
Whether you need a URL to perform well on the client and server sides,
it is necessary to set up a route for the client and server sides.
Developers have different choices to overcome the problem.
A solution may also range from bypassing an issue through a catch-all
route that proceeds bootstrap HTML to an isomorphic approach. Client
and server-side manage the same javascript code.
The leading cause of the issue is that you focus on client-side routing
completing without setting up anything to deal with server-side
routing.

5. In that scenario, you must consider the important idea of overcoming
issues.
It is necessary to set up client and server-side routing.
After that, redirect all server requests to /index.html that download a
necessary resource and let the Router access it.

6. Hash history
If you ever see a URL with #, it is important. The main thought is to add
# to the end of the URL. Anything after # is never sent to the server. If
the URL is like http://test.com/#/about, the server takes only before #
and sends the index page.
The Router will access the #/about the path and display the required
page. React Router brings a hash router component that you utilize for
hash-based routing. You can understand what causes a problem like
• Poor URLs
• Server-side rendering is not promising with such an approach.
• Search Engine Optimization can concern that a website comprises a
single page with hardly any content.

7. Catch-all
It is the best approach if you already have a server on the app. This
solution’s main idea is to redirect all of the server requests to
/index.html. It delivers an outcome like Hash History, and any request
made to the server will react with the index page.
It is necessary to fetch any JS resources if needed. React Router will
take over and load the proper view. code may also differ based on the
type of server you use. You must keep a clean URL and enhance the
user experience. Poor SEO and complex URLs to set up are significant
causes of the issue.

8. App.js
import {
BrowserRouter as Router
} from 'react-router-dom'
const App = () {
render() {
return (
// Your routes here
)
}
}
Server.js
const path = require("path");
app.get("/*", function (req, res) {
res.sendFile(
path.join(__dirname, "path/to/your/index.html"),
function (err) {
if (err) {
res.status(500).send(err);
}
}
);

9. server.js:
const path = require("path");
app.get("/*", function (req, res) {
res.sendFile(
path.join(__dirname, "path/to/your/index.html"),
function (err) {
if (err) {
res.status(500).send(err);
}
}
);
});

10. Example for Apache web server
.htaccess
RewriteBase / RewriteRule ^ index.html$ - [L]
RewriteCond % {
REQUEST_FILENAME
}!-f
RewriteCond % {
REQUEST_FILENAME
}!-d
RewriteRule. / index.html[L]
Nginx.conf
location / {
if (!-e $request_filename) {
rewrite ^ (.*) $ / index.html
break;
}
}

11. Hybrid
Regarding the hybrid approach, you expand the catch-all scenario by
including the specific script for one route. You can build some simple
PHP scripts to return the most important pages of your site with
content. It is more accessible for Googlebot to at least view what is
present on a page. You can understand issues like
• More complex URL to set up
• Only good SEO for routes that bring special treatment
• Duplicating code for representing content on a server and client

12. Isomorphic
You need to understand Node JS as a server and run the same JS code
on client and server ends. Defining routes in a single react-router config
is necessary and doesn’t require a duplicate rendering code.
The server sends the same markup that would end up with whether a
page transition occurs on the client. It is optimal in terms of SEO, and
developers try to understand the consequences of problems.
• The server must run JS. If you fail to use node JS, you can face a
severe problem.
• Difficult environmental issues
• Abrupt learning curve

13. Utilize the best hosting service
Blessed developers don’t have to worry about managing a server; they
have an alternative option to using a hosting service. With it, you can
discover a lot of different variations. You need to identify an ideal
service that supports client-side routers.
Configuring a single-page app is necessary to rewrite all URLs to
/index.html. With client-side routing, you must build a/_redirects file
with the command like /*/index.html 200. It will redirect requests to
.index.HTML.

14. Webpack / Development
The solution is suitable for everyone who faces trouble in development
using webpack-dev-server. You must understand how the webpack dev
server redirects all server requests to /index.html. You must integrate
important properties in the webpack config and set up public path and
historyApiFallback.
public path: '/',
historyApiFallback: true,
a public path permits you to identify a base path for all the
applications’ assets. HistoryAPIFallback will send 404s to /index.html.

15. It is essential to define the route on the react-router-dom. React
applications can know them quickly. Developers redirect all permalinks
and paths to index.HTML.file. In such a way, the server will load the app
and decide which things to display based on the route in the browser
address bar.

16. Conclusion
You correctly understand fixing react-router that does not work by
following simple measures. Hire react experts to start today and gain
peace of mind when handling the project with a front-end framework.
Source: https://bosctechlabs.com/fix-react-router-url-doesnt-work-
when-refreshing/