獲得通過路由

Question

我在從<Route />

路過此處的屬性沒有屬性是一些代碼：

./app.jsx（主應用程序）

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, IndexRoute } from 'react-router' 
import App from './components/app' 
import Home from './components/home' 
import About from './components/about' 

render((
    <Router> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} title="Home" /> 
      <Route path="about" component={About} title="About" /> 
     </Route> 
    </Router> 
), document.getElementById('app')) 

./components/app.jsx

import React from 'react'; 
import Header from './template/header' 

class App extends React.Component { 
    render() { 
     return (
      <div> 
       <Header title={this.props.title} /> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

export default App 

./components/template/header.jsx

import React from 'react' 

class Header extends React.Component { 
    render() { 
     return (
      <span>{this.props.title}</span> 
     ) 
    } 
} 

export default Header 

當我點擊我的家路線*我想我Header組件來顯示Home。

當我點擊我的約路線我希望我的Header組件來顯示About。

此時，我的Header組件不顯示任何內容。 this.props.title是我的App組件中的undefined。 看起來像你不能通過一個屬性<Route />

有沒有辦法實現這一點？

或者還有另外一種方法嗎？例如，你可以得到從兒童元素（this.props.children.title或類似的東西）？

Answer 1

它看起來像路線注入一個routes屬性與匹配路線的列表。列表中的最後一條路線包含您指定的道具。見http://codepen.io/anon/pen/obZzBa?editors=001

const routes = this.props.routes; 
const lastRoute = routes[routes.length - 1]; 
const title = lastRoute.title; 

我會毫不猶豫地一點點地用這個，因爲routes沒有在Injected Props記錄，所以我不知道它是跨版本更新有多可靠。一個簡單的選項雖然不夠清晰，但會使用this.props.location.pathname併爲標題維護一個查找表。

最好的和最靈活的選擇可能是樣板重之一，在其中定義模板，然後重用它跨組件：

class Template extends React.Component { 
    render() { 
     return (
      <div> 
       <Header title={this.props.title} /> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

class About extends React.Component { 
    render() { 
     return (
      <Template title="About"> 
       Some Content 
      </div> 
     ) 
    } 
}