Question

我有一个使用自定义路由器的应用。

在我的根应用中，我有以下代码（不是完整的代码）：

class ViewerApp extends Component {
    render() {
    return (
      <Router>
        <Route path="/" exact render={()=> <Redirect to={{pathname: '/login'}}/>}/>
        <Route path="/login" exact component={Login}/>
        <TableRoute path='/table' exact component={TableView} bedData={this.state.bedData}/>
      </Router>
    )
  }
}

TableRoute组件如下：

export const TableRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    authenticator.isAuthenticated === true
      ? <Component {...props} bedData={[]}/>
      : <Redirect to={{
          pathname: '/xxxx',
          state: { from: props.location }
        }} />
  )} />
)

此行以及重定向均正常。我的问题是将bedData传递到<Component />。我已经通过调试进行了检查，并且the和bedData被传递到Route类内的TableRoute组件。

我的最终目标是将bedData作为道具添加到<TableView />组件中。

但是，我无法理解如何将其作为道具传递给<Component />。我已经尝试过使用

如上所示

<Component {...props} bedData={[]}/>

和

<Component {...props} />

我认为它应该与直接道具一起使用，但是没有任何效果。我对React也很陌生，所以这也可能是新手愚蠢。预先感谢。

Answer 1

您正在将bedData传递到您的自定义路由，该自定义路由可以在rest.bedData中通过自定义路由访问，您可以像这样将其传递给组件

export const TableRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
     authenticator.isAuthenticated === true
  ? <Component {...props} bedData={rest.bedData}/>
  : <Redirect to={{
      pathname: '/xxxx',
      state: { from: props.location }
    }} />
 )} />
)

通过嵌套路线reactJS传递道具

1 个答案: