MERN: react-router-dom <Redirect/> not working in Heroku

Question

My app's routes are working fine. All the front-end routes you will see below render as intended.

However, if you go to the app and type /tournaments or /users it will display the raw json because those are two paths I defined in the backend Express routes for some of the data stuff.

So, I found a solution using Redirect via react-router-dom, and it works:

ValidateRoute.js

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
const ValidateRoute = props => {
  if(props.type === "invalid") return <Redirect to="/" />;
  else return <Route {...props} />
};
export default ValidateRoute;

App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Container, Row, Col } from 'reactstrap';
import { Provider } from 'react-redux';
import store from './store';
import NavigationBar from './components/layout/NavigationBar';
import ProfileSidebar from './components/layout/ProfileSidebar';
import TournamentIndex from './components/tournaments/Index';
import TournamentShow from './components/tournaments/Show';
import TournamentStart from './components/tournaments/Start';
import PlayerProfile from './components/players/PlayerProfile';
import PlayerDirectory from './components/players/PlayerDirectory';
import News from './components/news/SmashNews';
import { loadUser } from './actions/authActions';
import ValidateRoute from './components/ValidateRoute';

export default class App extends Component{
  componentDidMount() {
    store.dispatch(loadUser());
  };

  render() {
    return (
      <Provider store={store}>
        <Router>
          <NavigationBar />
          <Container>
            <Row className="justify-content-sm-center justify-content-md-center">
              <Col sm="7" md="7" lg="5" xl="5">
                <ProfileSidebar />
              </Col>

              <Col sm="7" md="7" lg="7" xl="7">
                <Switch>
                  <Route exact path="/" component={TournamentIndex} />
                  <Route path="/tournaments/:id" component={TournamentShow} />
                  <Route path="/tournaments/:id/start" component={TournamentStart} />
                  <Route path="/players" component={PlayerDirectory} />
                  <Route path="/player/:id" component={PlayerProfile} />
                  <Route path="/smash-news" component={News} />
                  <ValidateRoute path="/tournaments" type="invalid"/>
                  <ValidateRoute path="/users" type="invalid"/>
                </Switch>
              </Col>
            </Row>
          </Container>
        </Router>
      </Provider>
    );
  };
};

With that, when I try /tournaments or /users, it redirects to main path "/" on localhost only.

On heroku however, it still just displays the backend json and no Redirect takes place.

I can't find any solution about this, only similar issues that don't exactly fit this scenario. Anyone got an insight? Thanks

Answer 1

Try to use this:

history.push(‘/‘)

Method by bringing history from react-router-dom

Answer 2

my answer is going to be a bit different than expected as this is going to be a change in the backend code and not in the frontend as you said that:

However, if you go to the app and type /tournaments or /users it will display the raw json because those are two paths I defined in the backend Express routes for some of the data stuff.

So I think what would be the best solution is not trying to use Redirect as a fix but rather put add /api/v1/[route name] to all of your routes, for example:

const express = require("express");
const router = express.Router();

// Import Routes
const usersRoute = require("./users");
const jobsRoute = require("./jobs");
const utilRoute = require("./utils");
const betsRoute = require("./bets");

// Routes
router.use("/api/v1/users", usersRoute);
router.use("/api/v1/jobs", jobsRoute);
router.use("/api/v1/utils", utilRoute);
router.use("/api/v1/bets", betsRoute);

Once you have done so, you could add a proxy on your frontend for each request that starts with /api/ it will proxy it to the server address based on production/development mode which when run locally will be localhost:PORT and production will be something else.

to proxy the request you would need the 'http-proxy-middleware' and it can be used as such:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: `${process.env.REACT_APP_API_ENDPOINT}`,
      changeOrigin: true,
    }),
  );
};

process.env.REACT_APP_API_ENDPOINT will be your api endpoint which you will store inside an env file. based on the NODE_ENV you could use different env files based on which script you run.

I know this is a long answer, but this will make your code much cleaner and no future issues will arise from using the same endpoints for the frontend or backend.