Umleiten zu 404-Komponente ohne Änderung der URL im Browser?

Question

Ich mache eine universelle Redox-App, wo der Benutzer auf eine 404-Route umgeleitet wird, wenn er nach einer nicht vorhandenen URL fragt, aber ich habe this problem wo, wenn Sie auf die Zurück-Schaltfläche klicken Sie nicht zurück.

Gibt es eine Möglichkeit, auf eine 404-Route umzuleiten, ohne die URL zu ändern?

Hier ist, wie meine Routen wie folgt aussehen:

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

diese Redux Aktion Aufruf zu umleiten:

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

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

Was ich jetzt haben funktioniert, aber ich kann einige Benutzer-Erfahrung Frustration kommen sehen aus es.

EDIT: Ich denke, das Problem ergibt sich aus den Routen mit Parametern, wie zum Beispiel: . React-Router sieht eine Übereinstimmung und leitet nicht um: <Route path="*" component={NotFound} />.

Ich Anfordern von Daten von einer externen API und wenn es keine will, ist ich die 404 zeigen, ohne die URL zu ändern:

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

Versuchen Sie es mit replace statt push

• Push - Schiebt einen neuen Standort zur Geschichte,
• ersetzen Sie den aktuellen Standort immer - Ersetzt die aktuelle Position in der Geschichte.

react-router-redux

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

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

Answer 2

Entfernen Sie die /404 Route vollständig und leitet nicht. Im Moment wird Ihr Benutzer jedes Mal zu /404 umgeleitet, wenn Sie die Route nicht anpassen können. Ihr * Pfad funktioniert gut als ein Fang alle.