如何通过React Router v4将Redux道具传递给另一个路径中的单独组件？

我正在创建一个实时聊天应用程序与反应，反应路由器V4和REDX。问题是，正如你可能知道，反应路由器v4改变了很多东西和嵌套路线不适合我。如何通过React Router v4将Redux道具传递给另一个路径中的单独组件？

所以我有这样的代码嵌套路径不工作：

<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='/'是终极版连接：

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

所以我的组件App拥有所有的props我所需要的。除了我需要将这些道具从App传递到嵌套路线组件AddUser之外，所有的工作都很好。

我如何通过在不同的Route了Redux props到一个单独的组成部分？

来源

2017-06-05 Merunas Grincalaitis

的[与反应路由器v4的嵌套路由（可能的复制https://stackoverflow.com/questions/41474134/nested-routes-with-react- router-v4） –

检查这也：https://stackoverflow.com/questions/42254929/how-to-nest-routes-in-react-router-v4 –

这个问题没有解决我的问题，因为它不够清楚为了我。我在下面回答了我自己的问题。 –

随着当我们需要嵌套路线反应路由器V4，我们不这样做窝路线。相反，我们把它们放在嵌套组件中。你可以在这里更了解这一点：Nested routes with react router v4

在你的情况，你可以把你的“/用户”路线的应用程序组件内，然后用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}/>}/> 
     //.... 
    ) 
    } 
}

来源

2017-06-05 17:57:06

我找到了解决阅读这篇博客：https://medium.com/@5XvYrLT7/react-server-side-rendering-with-react-router-3-x-74cf87919b3

有了反应，路由器V4你不这样做任何更多的，不要窝：

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

你不喜欢这样现在。应用嵌入你的路由AS-是：

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

来源

2017-06-05 17:53:51

如何通过React Router v4将Redux道具传递给另一个路径中的单独组件？

回答

相关问题