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

Question

我正在制作一个通用的 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>
);

调用这个 redux 动作来重定向：

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

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

我现在拥有的东西有效，但我可以看到一些用户体验的挫败感。

编辑：我认为问题是由带有参数的路由引起的，例如： <Route path="venues/:venueName" component={VenueContainer} /> 。 React-router 看到匹配项并且不会重定向到： <Route path="*" component={NotFound} /> 。

我正在从外部 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());
        });
    };
}

Answer 1

尝试使用replace而不是push

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

反应路由器-redux

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

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

Answer 2

完全删除/404路由，不要重定向。 现在，每次您无法匹配路由时，您的用户都会被重定向到/404 。 您的*路径可以很好地解决所有问题。