Javascript 重定向到404组件而不更改浏览器中的URL？

我正在制作一个通用的redux应用程序，如果用户请求一个不存在的url，他将被重定向到404路由，但是我有一个应用程序，如果你点击后退按钮，它不会让你返回

有没有办法在不更改url的情况下重定向到404路由

我的路线是这样的：

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

我现在所拥有的一切都很有效，但我可以看到一些用户体验的挫折感

编辑：我认为问题是由带有参数的路由引起的，例如：

。 React路由器看到匹配项，不重定向到：

我正在从外部API请求数据，如果没有，我希望在不更改URL的情况下显示404：

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

---

完全删除

/404

路由，不要重定向。现在，每当您无法匹配路径时，您的用户将被重定向到

/404

。您的

*

路径可以作为一个通用路径使用。

尝试使用

replace

而不是

push

• 推送-将新位置推送到历史记录，成为当前位置
• 替换-替换历史记录中的当前位置

---

如果只删除

404

路由，会发生什么情况

*

应带头调用您的

NotFound

组件，而无需更改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());
        });
    };
}

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

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