Question

我正在使用定义为here的路由配置。但是，当使用这种路由器配置方法时，如何将props传递给组件？

从文档中查看以下方法似乎并不是提供道具的方法：

const RouteWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    // pass the sub-routes down to keep nesting
    <route.component {...props} routes={route.routes}/>
  )}/>
)

做类似以下的事情并不奏效。道具没有通过：

{routes.map((route, i) => (
    <RouteWithSubRoutes key={i} user={this.state.user} {...route}/>
))}

我正在使用React的默认状态管理。我需要Redux吗？

Answer 1

以下是如何使用Flux + React一起传递道具的示例。我希望这对你有用。如果您有其他问题，请告诉我。

<强> AppComponent.js

在AppComponent中，您只需要传递需要渲染的页面。

render () {
     <div>
        <Route path="/login" component={Login} />
        <Route exact path= "/:date?" component={Dashboard} />
    </div>
}

在 app.js 组件中，您可以导入所需的所有服务，操作和主要商店组件。 Checkout bottle.js可以更轻松地传递价值和服务。但是，您需要渲染

ReactDOM.render(
    (
        <BrowserRouter>
            <Route path="/" AppStore={AppStore} render={props => <AppComponent {...props} AppStore={AppStore} />} />
        </BrowserRouter>
    ),
    document.getElementById("view-container")
);

您应该让像AppComponment.js中的组件Dashboard这样的父组件获取从app.js传递到AppComponent到Dashboard（以及Dashboard的子组件）的数据。

至于AppStore，这就像是所有其他商店的容器。您需要导入所有其他数据存储组件和操作。

使用`react-router`配置时，如何将状态传递给组件

1 个答案: