どのように私はReduxのは、このようなネストされたルートとルーターを使用して反応するアプリ、持っているルータ

Question

反応でアクティブなルートを決定するために：私はブレッドクラムのコンポーネントを書き込むしようとしている

<Provider store={store}> 
    <Router history={browserHistory}> 
     <Route name="sales" path="/" component={App}> 
      <IndexRoute name="home" component={Home} /> 
      <Route name="reports" path="/reports" component={Reports}> 
      <IndexRoute name="reports-home" component={ReportsHome} /> 
      <Route name="report-1" path="/reports/report-1" component={Report1}/> 
      <Route name="report-2" path="/reports/report-2" component={Report2}/> 
      </Route> 
     </Route> 
    </Router> 
</Provider> 

を。現在のルートを決定することができるようになります。私ができる

Object {__v2_compatible__: true} 
__v2_compatible__: true 
createHref: createHref(location, query) 
createKey: createKey()createLocation: createLocation(location) 
createPath: createPath(location, query) 
go: go(n) 
goBack: goBack() 
goForward: goForward() 
isActive: isActive(location) 
listen: listen(listener) 
listenBefore: listenBefore(hook) 
push: push(location) 
pushState:() 
registerTransitionHook: registerTransitionHook(hook) 
replace: replace(location) 
replaceState:() 
setRouteLeaveHook: listenBeforeLeavingRoute(route, hook) 
setState:() 
transitionTo: transitionTo(nextLocation) 
unregisterTransitionHook: unregisterTransitionHook(hook) 
__proto__: Object 

：

Breadcrumbs = withRouter(Breadcrumbs); 

これは私にこのようになりますルータのオブジェクトを与える：私はによって提供さwithRouter機能を使用してルータを受信するコンポーネントを設定した

は、ルータが反応しますこれを使用して現在のルートを決定しますか？良い方法はありますか？

Answer 1

あなたのためにこれを行うモジュールが既にあります。私はそれがreact-router-breadcrumbsと呼ばれると信じています。私はそれを試していない。

カスタムソリューションをしたい場合は、ここにあなたが何ができるかです：

---

はthis.props.routesとthis.props.paramsオブジェクトを使用してください。 routesを介してマップし、各エントリについて、paramsオブジェクトのそのようなキーを参照します。上記のパラメータで文字列を作成することができます。

各ルート（IndexRoutesを除く）にpath属性を指定していることに注意してください。これは、特定のページのカスタム名を表示することがあるためです。たとえば：

<Route path="/:productId" name="Start" title="Start" component={StartView} /> 

は、ここに私のアプリのソリューションです：あなたはトップレベルでこれを入れたいと思います

componentDidMount =() => { 
    this._prepareBreadCrumbs(this.props); 
} 

componentWillReceiveProps = (newProps) => { 
    this._prepareBreadCrumbs(newProps); 
} 

_prepareBreadCrumbs = (props) => { 
    let {routes, params} = props; 
    let breadcrumbPath = ""; 
    let temp = routes.map(
    (item, i) => { 
     if(item.path == null) return null; //if we are visiting an item without a path, ignore it. 
     if(i < routes.length-1 && routes[i+1].path != null) { 
     let arr = item.path.split(/[:/]|(:\/)/g); //sometimes the path is like "/:product_id/details" so I need to extract the interesting part here. 
     arr = arr.map(function(obj) { 
      return (obj in params) ? params[obj] : obj; //We now have ":product_id" and "details" - the first one will exist in the "params" object. 
     }); 
     breadcrumbPath += arr.filter(Boolean).join("/") + "/"; //clean out some garbage and add the "/" between paths. 
     if(i == 0) return <li key={i}><Link to={breadcrumbPath}>YourSite.com</Link></li> //If on the root - display the site name 
     return <li key={i}><Link to={breadcrumbPath}>{item.name}</Link></li> 
     } else { 
     document.title = "YourSite.com - " + item.title; //set the document title if you want 
     if(i == 0) return <li key={i} className="active"><span>YourSite.com</span></li> 
     return <li key={i} className="active"><span>{item.name}</span></li> 
     } 
    } 
); 
    this.setState({breadcrumbPath: temp}); 
} 

render() { 
    <p>{this.state.breadCrumbPath || ""}</p> 
} 

は、コンポーネントを反応します。

Answer 2

反応ルータバージョン3.0では、withRouter経由での所在地取得などが追加されました。 Dan AbramovはwithRouterを使用するために3.0にアップグレードすることを推奨します。 2.7から3.0までは、あなたが見た機能しか提供していませんでした。

出典：https://github.com/ReactTraining/react-router/blob/master/CHANGES.md#v300-alpha1