本短教程將解釋如何通過React Router 將props傳遞給子組件。
關於如何通過React Router將props傳遞給子組件,有多種解決方案,但其中一些已經過時。
其中最簡單的方法是將props添加到Route包裝組件:
const Index = props => <h1>{props.route.something}</h1>
var routes = <Route path="/" something={'here'} component={Index} />
但是這種方式需要修改props的訪問方式,從this.props
改為this.props.route.*
,這可能或可能不被接受。
修復這個問題的方法是使用以下方式:
const Index = props => (
<h1>{props.something}</h1>
)
<Route path="/" render={() => <Index something={'here'} />} />