2017-03-08 3 views
0

React with ReduxをTypeScriptで使用するようにASP.NET MVCアプリケーションを書き直しています。私はReact Routerを使っています。サイトはルートにパラメータを使用して顧客の組織を識別します。ルータでルート要素のパラメタを

例; www.oursite.com/:organizationId/overviewまたはwww.oursite.com/:organizationId/account/:accountIdのようなディープリンクで

をwww.oursite.com/:organizationId私が設定しています/

import * as React from 'react'; 
import { Router, Route, IndexRoute, HistoryBase } from 'react-router'; 
import { Layout } from './components/Layout'; 
import Home from './components/Home'; 
import OverView from './components/OverView'; 
import Account from './components/Account'; 

export default <Route path='/:organizationId' component={ Layout }> 
    <IndexRoute components={{ body: Home }} /> 
    <Route path='overview' components={{ body: OverView }} /> 
    <Route path='account/:accountId' components={{ body: Account }} /> 
</Route>; 

これが機能する以下のようにルータを反応させるが、それでもあるアプリ/ページのルートとしてページ上の任意のリンク・コンポーネントは、しないでください。 www.oursite.com/overview、ないwww.oursite.com/:organizationId/overviewにアカウント制御リンク上

例えば

<Link to={'/overview'} activeClassName='active' /> 

/:organizationId/をルートと見なすようにリアクションルータを設定する方法はありますか?

答えて

0

反応ルータのドキュメントを見ると、反応ルータが文字列をサポートしていないため、相対リンクのように見えます。現在、絶対リンクだけがサポートされています。

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

しかし、私はあなたがparamsは探しているものだと思います。 React-routerは、ルートに接続されているすべてのコンポーネントにparamsを渡します。例えば、あなたの概要コンポーネントでは、paramsはpropでなければなりません。あなたは

<Link to={`/${this.props.params.organizationId}/overview`></Link>

このことができますなら、私を知ってみましょうような何かを行うことができるはず!

+0

これは素晴らしい動作です!私がTypeScriptを使用しているので、{params:{organizationId:string}}をthis.props.paramsへのアクセスを得るために適切な小道具型宣言に追加する必要がありました。 – Sturnus

+0

素晴らしい!あなたはそれが働いてうれしい –

関連する問題