React JS: Solucionar «cannot GET/URL» en unas pocas líneas (Express o Webpack)

Probablemente estás trabajando en tus primeras apps con React JS y tienes que implementar React Route:

import {BrowserRouter, Route} from 'react-router-dom';

Todo va perfecto mostrando nuestra primera ruta definida hasta que:

Cannot GET /MiOtraRuta

Al crear una nueva ruta, obtienes este error y tu código y llamada están bien escritos. Vas a la consola y te indica un error 404 Not Found!…

¿Por qué?

Bueno, recuerda que ya no estamos utilizando un «client side routing», sino «server side routing».
La primera vez que iniciamos nuestra aplicación, el navegador tiene que saber cuál es la ruta inicial, antes de cualquier otra cosa.
Por lo tanto, tenemos una llamada GET al servidor para esta ruta inicial, la cual entiende que no existe y nos arroja el error.

Así que tenemos que realizar un pequeño ajuste a la configuración del servidor para poder cargar estas rutas.

Express

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');

app.get('*', (req, res) => {    
     res.sendFile(path.join(publicPath, 'index.html')), function(err) {             
     if (err) {                 
          res.status(500).send(err) 
          }        
     };
});

En estas pocas líneas le estamos comunicando al servidor cuál va a ser nuestra ruta inicial. Así, tenemos que:

const publicPath = path.join(__dirname, '..', 'public');

Está indicando que obtenga la ruta inicial. En donde __dirname nos devuelve el directorio actual y, en este caso, conseguirá acceder
al directorio «public».

Enseguida, la petición solicita la respuesta para saber si existe nuestro «index.html» inicial, en el directorio que le hemos indicado:

res.sendFile(path.join(publicPath, 'index.html'))

res.sendFile() nos transfiere el archivo en la ruta dada y en caso de no encontrarlo nos arrojará un error 500, pues hemos indicado un manejador de error con la función que recoje el parámetro «err».

Webpack

Y aquí tenemos una solución todavía más sencilla.
Si estás ejecutando webpack-dev-server entonces lo único que tienes que hacer, es configurar tu archivo webpack.config.js agregando lo siguiente:

output: {
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true
  }

Dentro de output agregas publicPath: ‘/’ para especificar la base de la ruta. Y finalmente, dentro de devServer agregas historyAPIFallback estableciendolo en true para redireccionar las respuestas 404 a /index.html y ¡Listo!