2017-01-31 51 views
1

私は自分のアプリケーションでreact-routerを使い始めていますが、URLの末尾にスラッシュがあるときは機能しません。私はそれについてさらに検索し、すべてのドキュメントと反応ルータの問題を読んで、<Redirect from='/*/' to="/*" />を使ってみましたが、良い解決策ではありませんでした。だから、私はURLの末尾に/?を挿入する提案を見つけたが、それでも読むことはできませんでした。反応ルータのURLの末尾にスラッシュを付ける方法

routes.jsのコード:

export default (
    <Route path="/" component={App}> 
     <IndexRoute component={ProfileFillComponents} /> 
     <Route path="/seguro-residencia" handler={require('./components/Forms/Residencial/ProfileFill/profileFillComponents')} /> 
     <Route path="/seguro-residencia/informacoes-pessoais" component={CotationNumber} /> 
    </Route> 
) 

index.jsのコード:

render((<Router history={browserHistory} routes={routes} />), document.getElementById('root')); 

より多くの検索、私は機能を作った男はのURLで末尾のスラッシュを強制することが判明し、私はそれを反対にすることを決意し、それを持たないようにしました。機能付き

更新routes.jsコードはありません最後のスラッシュ機能:再び

export default (
    <Route onEnter={forceTrailingSlash} onChange={forceTrailingSlashOnChange}> 
     <Route path="/" component={App}> 
      <IndexRoute component={ProfileFillComponents} /> 
      <Route path="/seguro-residencia" handler={require('./components/Forms/Residencial/ProfileFill/profileFillComponents')} /> 
      <Route path="/seguro-residencia/informacoes-pessoais" component={CotationNumber} /> 
     </Route> 
    </Route> 
) 

function forceNoTrailingSlash(nextState, replace) { 
    const path = nextState.location.pathname; 
    if (path.slice(-1) === '/') { 
    replace({ 
     ...nextState.location, 
     pathname: path.slice(1,path.lastIndexOf('/')-1) 
    }); 
    } 
}  

function forceNoTrailingSlashOnChange(prevState, nextState, replace) { 
    forceNoTrailingSlash(nextState, replace); 
} 

そして、これは動作しませんでした!私はこのURLをできるだけフレンドリーにする必要があり、最後に末尾にスラッシュがないようにしたいと思います。どのように私はこれを行うことができますどのような提案?そしてなぜRedirectがこの場合にはうまくいかなかったのですか?

+0

解決方法はありましたか?共有していただけますか? – myDoggyWritesCode

+0

はい、持っています!私はすぐに私のソリューションを掲載します。 :) – Aipi

+0

素晴らしい。 :)ありがとう – myDoggyWritesCode

答えて

1

このリダイレクトを行う良い方法が見つかりました。

app.use(function(req, res, next) { 
     if (req.path.length > 1 && /\/$/.test(req.path)) { 
     var query = req.url.slice(req.path.length) 
     res.redirect(301, req.path.slice(0, -1) + query) 
     } else { 
     next() 
     } 
    }); 

を説明がbasiclyそれである:この機能で

  1. URLはその後、1壮大であれば、それは最後のスラッシュを持っている場合、私は確認してください以下は、私が使用していたコードです。
  2. trueの場合、スラッシュを付けずにこのURLを取得し、このページに後ろにスラッシュを付けずに301リダイレクトします。
  3. それ以外の場合は、次のメソッドにジャンプして値を送信します。
+0

私はいくつかのクライアント側の解決策を期待していました。しかし、これはうまくいくはずです。しかし、どのようにアプリケーションの状態を維持するのですか? – myDoggyWritesCode

+1

状態はこのプロセスには関係しません。これはサーバー側です。したがって、あなたのアプリケーションを妨げることはありません。スラッシュを付けずにURLにパスを渡すことができます。クライアントがタップした場合の例です。これをルートで動作させるには、 'react-route 'を使用して、' 'を使用し、スラッシュを使用しないでください。アプリケーションにエラーが発生することはありません。がんばろう! – Aipi

+0

返信いただきありがとうございます。あなたは正しい。しかし、私の場合、私は宣言的なURLを使用していて、urlはurlに記述されていないかもしれません(ユーザーごとに新しいフォルダを作成するので、droboxのように動的です)。したがって、この場合は動作しない可能性があります。しかし、私は、サーバー側が唯一の良い解決策だと思います。 – myDoggyWritesCode

関連する問題