2017-01-25 3 views
0

には反応し、ルータ4.0.0.alpha6を、私はこれを達成したい:部分リダイレクト4.0.0.alpha6

site.com/en -> site.com 
site.com/en/hi -> site.com/hi 
site.com/en/hi/there -> site.com/hi/there 

は、どのように私はそれに行きますか? 私はドキュメントから多くを試しましたが、悲しいことにそれを得るように見えることはできません...

ありがとう読んで!

+0

URLをリダイレクトしますか?または異なるコンポーネントをレンダリングしますか?あなたは試したものを投稿できますか?たぶんそれはあなたがもう少ししたいことを説明します – azium

答えて

1

注:v4アルファについて言及していますが、私はベータ版(未リリースですが、レポのv4ブランチから利用可能です)を使用します。

実質的には、enセグメントで始まり、残りのURLセグメントから分割してpathnameの残りの部分にリダイレクトするpathnameを特定することです。

正規表現では、これを/^\/en(\/.*)?$/と一致させることができます。 React Routerはpath-to-regexpを使ってパス名にマッチさせますが、これは正規表現をサポートしますが、React Routerは(少なくとも直接ではありません)。それでも、名前の付いていないパラメータを使用して、これと一致するパスを設定できます。

/en/en、および /en/hiではなく /englishと一致している必要があり
<Route path='/en(/*)' component={EnRedirect} /> 

。次に、コンポーネントで一致したurlをセグメントに分割し、enを削除し、セグメントに再結合してリダイレクトする必要があります。

const EnRedirect = ({ match }) => { 
    const parts = match.url.split('/') 
    parts.splice(1,1) 
    const to = parts.join('/') 
    return <Redirect to={to} /> 
} 
+0

あなたの答えをありがとう!あなたが使用する#v4ブランチのバージョンのコミット番号を教えてください。インストールするコミットが見つからないようです。 –

+0

NPMを使用してインストールしようとしている場合、まだ動作しません。あなたは 'git clone'のReact Routerを必要とし、' v4'ブランチをチェックし、 'packages/react-router'ディレクトリに移動します(React Routerは複数のパッケージに変換されています:' react-router'、 'react-router -dom'、 'react-router-native')、パッケージに' npm link 'して、あなたのプロジェクトと 'npm link react-router'に行きます。これは、 'npm install react-router @ next'よりはるかに多くのステップですが、ベータがリリースされるまでは、あなたのプロジェクトでベータコードを使用するために必要な作業です。 –

+1

これはアルファ版では 'Route'を' Match'に、 'path'を' pattern'に、 'match.url'を' match.pathname'に変更することで可能になると思います。 –

関連する問題