如何通過React Router將props傳遞給子組件

本短教程將解釋如何通過React Router 將props傳遞給子組件。

關於如何通過React Router將props傳遞給子組件，有多種解決方案，但其中一些已經過時。

其中最簡單的方法是將props添加到Route包裝組件：

1
2
3

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'} />} />

tags: [“React Router”, “React components”, “props”]