Redirecting to 404 component without changing URL in the browser?

Question

I'm making a universal redux app where the user is redirected to a 404 route if he asks for a non-existing url, but I have this problem where if you click the back button it doesn't let you go back.

Is there a way to redirect to a 404 route without changing the url?

Here's how my routes look like:

export default (

    <Route path="/" component={App}>

        <IndexRoute component={MainPage} />

        <Route path="venues/:venueName" component={VenueContainer} />

        <Route path="404" component={NotFound} />

        <Route path="*" component={NotFound} />

    </Route>

);

Calling this redux action to redirect:

import { push } from 'react-router-redux';



export default function redirect404() {

    return (dispatch) => {

        dispatch(push('/404'));

    };

}

What I have right now works but I can see some user-experience frustration coming out of it.

EDIT: I think the issue is arising from the routes with params, such as:

<Route path="venues/:venueName" component={VenueContainer} />

.
React-router sees a match and doesn't redirect to:

<Route path="*" component={NotFound} />

.

I'm requesting data from an external API and if there is none I want to show the 404 without changing the URL:

import axios from 'axios';

import redirect404 from './utilActions';



export function fetchVenue() {

    return (dispatch) => {

        dispatch({

            type: 'FETCH_VENUE',

            payload: axios.get('http://externalAPI.com'),

        })

        .catch((error) => {

            console.info(error);

            dispatch(redirect404());

        });

    };

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Try using replace instead of push

push - Pushes a new location to history, becoming the current location

replace - Replaces the current location in history.

react-router-redux

import { push } from 'react-router-redux';

export default function redirect404() {
  return (dispatch) => {
    dispatch(replace('/404'));
  };
}

Redirecting to 404 component without changing URL in the browser?

Sign up