如何使用React Router v4將Redux props傳遞到不同路徑中的單獨組件？

Question

我正在創建一個帶有React，React Router V4和Redux的實時聊天應用程序。 問題是，您可能知道，反應路由器v4更改了很多東西， 嵌套路由對我不起作用。

所以我有這段代碼與嵌套路由不起作用 ：

<Route path='/' component={App}>
    <Route path="/user" component={AddUser}/>
</Route>

這是給我這個錯誤的Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored 。

其中component={App}在第一個<Route path='/'是一個redux連接：

const App = connect(mapStateToProps, mapDispatchToProps)(Header) 

因此，我的組件App具有我需要的所有props 。 除了需要將這些道具從App傳遞到嵌套路線組件AddUser之外，其他所有方法都工作正常。

如何將redux props傳遞到其他Route的單獨組件？

Answer 1

當需要嵌套路由時，使用react-router v4時，我們不嵌套路由。 相反，我們將它們放在嵌套組件中。 您可以在此處了解更多信息： 使用react router v4的嵌套路由

在您的情況下，可以將“ /用戶”路由放入App組件內，然后使用render代替component 。 因此，您可以照常將您的App道具傳遞給AddUser。

<Route path='/' component={App}/>

App.js

class App extends Component{
  //...
  render(){
    return(
      //....
      <Route path="/user"
        render={() => <AddUser myProp={this.props.myAppProp}/>}/>
      //....
    )
  }
}

Answer 2

我找到了閱讀此博客文章的解決方案： https : //medium.com/@5XvYrLT7/react-server-side-rendering-with-react-router-3-x-74cf87919b3

使用react-router v4，您無需再執行此操作，不要嵌套：

<Route component={App}>
    <Route component={Index} />
    <Route component={About} />
</Route>

您現在就這樣做。 應用程序按原樣嵌入您的路線：

<App>
    <Switch>
        <Route exact path="/" component={Index} />
        <Route path="/about" component={About} />
    </Switch>
</App>