React-router Urls Don't Work When Refreshing or Writing Manually

React-router URLs don’t work when refreshing or writing manually

If you have been working with React and React-router, you might have encountered a common issue where the URLs don’t work as expected when refreshing the page or manually typing them in the browser. This issue occurs because React-router handles routing on the client-side, which means that when the page is refreshed or the URL is manually entered, the server doesn’t recognize the route and returns a 404 error.

In this blog post, we will explore two solutions to this problem: using a server-side rendering (SSR) approach or configuring the server to handle all requests.

Solution 1: Server-side Rendering (SSR)
Server-side rendering is a technique that allows the initial rendering of a React application on the server before sending it to the client. By using SSR, we can ensure that the correct content is displayed even when the page is refreshed or the URL is manually entered.

To implement SSR with React-router, we can use frameworks like Next.js or Gatsby. These frameworks handle the server-side rendering for us, making it easier to solve the URL refresh issue.

Here’s an example of how to use Next.js for server-side rendering with React-router:

// pages/index.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => {
  return <h1>Welcome to the home page!</h1>;
};

const About = () => {
  return <h1>About us</h1>;
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

With Next.js, when you run the application, it will handle the server-side rendering for you, making the URLs work correctly even when refreshed or manually entered.

Solution 2: Configuring the Server
If you are not using a framework like Next.js or Gatsby, you can configure your server to handle all requests and serve the React application’s entry point file (usually index.html) for any route. This way, when the server receives a request for a specific URL, it will always serve the same entry point file, and React-router will take care of rendering the correct component based on the URL.

Here’s an example of how to configure a Node.js server using Express:

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

In this example, we are serving the static files from the build directory, which is the output directory of the React application build process. The app.get('*') route will handle all requests and serve the index.html file, allowing React-router to take over and render the correct component based on the URL.

By implementing either the server-side rendering approach or configuring the server to handle all requests, you can ensure that React-router URLs work correctly even when the page is refreshed or the URL is manually entered.

HTML Output:
“`html

div>