Question

我找不到如何将对象从一个React Route Component发送到另一个的方法。例如，我有这样的容器路由器：

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/sections/:id" 
             component={Section} />
    </div>
  </Router>
)

使用Home组件，如下所示：

const Home = () => {
    const Sections = tilesData.map( (section, index) => (
      <div>
        <img src={section.img} height="200" /><br/>
        <Link to={`/sections/'${section.id}`} >Details for {section.author}</Link>
        <hr/>
      </div>
    ))
    return(
      <div>
          {Sections}
      </div>
    )
}

并且我不明白= \当使用<Link>点击下一条路线时如何传递所选对象。这是示例组件：

const Section = (props) => {
    return(
        <div>
            Section {props.title} 
            <img src={props.img} />
        </div>
    )
}

以下是代码示例：https://codesandbox.io/s/Mv037AE3

Answer 1

在react-router v4中，我们通常执行以下操作来传递ProductPage组件：

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

如果要使用道具，可以准备一个函数，使用所需的道具返回组件。在这里，我准备传递一个toggleSidebarOn prop：

const MyProductPage = (props) => {
  return (
    <ProductPage 
      toggleSidebarOn={this.toggleSidebarOn.bind(this)}
      {...props}
    />
  );
}

然后使用<Route />的{{3}}代替其组件道具。不要同时使用这两个并且不要使用组件道具，因为这会导致意外的重新安装并且可能会破坏您的应用程序（例如，对于我来说，边栏动画的CSS过渡停止正常工作）。

使用MyProductPage的渲染道具，我们可以将toggleSidebarOn道具传递给其目标路线：

<Router>
  <div>
    <Switch>
      <Route exact path="/products" render={MyProductPage} />
      <Route exact path="/perspectives" component={PerspectivePage}/>
      <Route component={NotFound}/>
    </Switch>
  </div>
</Router>

希望这有帮助！

如何在React Routes 4之间传递道具

1 个答案: