Question

我正在使用react创建一个实时聊天应用程序，反应路由器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。

component={App}位于第一个<Route path='/'中的是redux connect：

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

所以我的组件App拥有我需要的所有props。一切正常，除非我需要将这些道具从App传递给嵌套路径组件AddUser。

如何将redux props传递给其他Route中的单独组件？

Answer 1

当我们需要嵌套路由时，使用react-router v4，我们不会嵌套路由。相反，我们将它们放在嵌套组件中。您可以在此处详细了解：Nested routes with react router v4

在您的情况下，您可以将“/ user”路由放在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按原样嵌入您的路线：

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

如何使用React Router v4将Redux道具传递到不同路径中的单独组件？

2 个答案: