Redirection vers le composant 404 sans changement d'URL dans le navigateur ?

Question

Je réalise une application universelle redux où l'utilisateur est redirigé vers une route 404 s'il demande une url inexistante, mais j'ai ce problème où si tu cliques sur le bouton "retour", ça ne te laisse pas revenir en arrière.

Existe-t-il un moyen de rediriger vers une route 404 sans modifier l'url ?

Voici à quoi ressemblent mes itinéraires :

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>
);

Appeler cette action redux pour rediriger :

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

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

Ce que j'ai pour l'instant fonctionne, mais je vois bien qu'il en résulte une certaine frustration au niveau de l'expérience utilisateur.

EDIT : Je pense que le problème provient des routes avec des paramètres, tels que : <Route path="venues/:venueName" component={VenueContainer} /> . React-router voit une correspondance et ne redirige pas vers : <Route path="*" component={NotFound} /> .

Je demande des données à une API externe et s'il n'y en a pas, je veux afficher le code 404 sans modifier l'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());
        });
    };
}

Answer 1

Essayez d'utiliser replace au lieu de push

• push - Place un nouvel emplacement dans l'historique, qui devient l'emplacement actuel.
• replace - Remplace l'emplacement actuel dans l'historique.

react-router-redux

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

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

Answer 2

Retirer le /404 route entièrement et ne pas rediriger. Actuellement, votre utilisateur est redirigé vers /404 chaque fois que vous ne pouvez pas faire correspondre l'itinéraire. Votre * Le chemin d'accès fonctionne bien en tant qu'attrape-tout.