2016-10-13 19 views
0

私は普遍的なreduxアプリケーションを作っています。どこにも存在しないURLを要求すると404ルートにリダイレクトされますが、私はthis problemを持っています。戻るボタンをクリックすると、戻ることはできません。ブラウザのURLを変更せずに404コンポーネントにリダイレクトしますか?

URLを変更せずに404経路にリダイレクトする方法はありますか?リダイレクトするために、このReduxのアクションを呼び出す

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

:ここ

は私のルートがどのように見えるかだ

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

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

私が今持っていることは動作しますが、私はいくつかのユーザー・エクスペリエンスのフラストレーションがから出てきて見ることができますそれ。

EDIT:この問題は、パラメータがあるルートから発生していると思われます。 <Route path="venues/:venueName" component={VenueContainer} />などです。 リアクタが一致したと見なし、 <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()); 
     }); 
    }; 
} 
+0

? '*'はURLを変更せずに 'NotFound'コンポーネントを呼び出す必要があります – Robiseb

+0

これはこのようなパラメータを持つルートでは動作しません ' ' –

答えて

1

replaceを使用してみてください代わりにpush

  • プッシュ - 現在の場所
  • を置き換えるになって、歴史に新しい場所をプッシュは - 歴史の中で現在の位置を置き換えます。あなただけの `404`ルートを削除する場合は何が起こった

react-router-redux

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

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

は完全に/404ルートを削除し、リダイレクトしないでください。現在、ルートに一致しないと、ユーザは/404にリダイレクトされます。あなたの*パスは、キャッチオールとして正常に動作します。

+1

残念ながら、' * 'パスはparamsでルートを捕まえません:/ –

関連する問題