javascript - 如何使用 React Router v4 将 Redux props 传递到不同路由中的单独组件？

Question

我正在使用 React、React Router v4 和 Redux 创建一个实时聊天应用程序。问题是，正如您所知，React Router 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 .

哪里component={App} ，在第一个<Route path='/'是一个 redux 连接:

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

所以我的组件App拥有所有 props我需要。一切正常，除了我需要从 App 传递这些 Prop 。到嵌套路由组件AddUser 。

如何通过 redux props到不同 Route 中的单独组件？

Answer 1

使用react-router v4，当我们需要嵌套路由时，我们不会嵌套路由。相反，我们将它们放在嵌套组件内。您可以在这里阅读更多信息:Nested routes with react router v4

就您而言，您可以将“/user”路由放入应用程序组件中，然后使用 render 而不是 component。因此，您可以像往常一样将您的 App props 传递给 AddUser。

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

App.js

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