如何在 React Router v4 中將自訂 Props 傳遞給子元件？

如何將自訂Props 傳遞給React Router v4 中的子元件

問題：

範例程式碼：

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

解：

要將自訂道具傳遞給子元件，請使用渲染道具來定義與路由內聯的元件：

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

在子元件中，如下存取自訂道具：

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

注意： 確保將{...props} 傳遞給子元件以保留對預設路由器props 的存取（例如，符合、位置、歷史記錄）。

以上是如何在 React Router v4 中將自訂 Props 傳遞給子元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！