如何将道具传递给 React Router 4 中的嵌套路由？

Question

我有一个这样的组件树：

-App
--UserList
---UserItem
---UserItem
---UserItem
--User

我无法将用户数据从 UserItem 传递到 User。这就是我所拥有的：

App.js

export default class App extends Component {
  state = { users: [] }

  componentDidMount() {// fetch and setState}

  render() {
    return (
      <BrowserRouter>
        <Route
          exact
          path="/"
          render={() => <UserList users={this.state.users} />}
        />
      </BrowserRouter>
    )
  }

}

用户列表.js

export default function({ users }) {
  return (
    <div>
      {users.map(user => (
        <UserItem user={user} key={`${user.id}`} />
      ))}
    </div>
  )

}

这就是问题所在：我想将数据从父组件传递给子User 组件，而不必再次从 API 获取用户数据。

UserItem.js

export default function({ user }) {
  return (
    <div>
      <Link to="/user">{user.name}</Link>

      <Route path={`/user/${user.name}`} render={() => <User user={user} />} />
    </div>
  )
}

Answer 1

我不确定您要在这里实现什么。当路由为 / 时，您的应用会呈现 UserList。 UserList 为数组中的每个 user 呈现一个 UserItem 组件。每个UserItem 只是为每个用户呈现一个特定的路由，如果该路由被触发，它将呈现User 组件。

但如果我没记错的话，如果路由不是/，则不会呈现UserList，因此如果有人访问user/...，则内部路由实际上并不存在。

基本上，这个应用程序不会渲染任何东西。

如果你从App 的路由中删除exact 关键字，我想你会得到你想要的结果。在这种情况下，打开/user/<USER_NAME> 将为该用户呈现User 元素。

您的问题是关于通过路由将道具传递到组件中，您使用的机制是正确的。

<Route path={...} render={() => <User user={user} />} />

这其实是对的。请参阅下面链接的代码。在将路由更改为/user/User1 时，您将看到应用程序中呈现的“User1”的名称。

在此处查看工作代码：https://codesandbox.io/s/18w3393767

Answer 2

你应该在 UserItem 组件中使用this.props.users

Answer 3

我不确定，但你能像下面这样传递道具吗，这里我将道具传递给渲染，然后传递给用户组件

      <Route path={`/user/${user.name}`} render={(props) => <User user={user} {...props} />} />

Answer 4

export default function({ users }) {
  return (
    <div>
      { this.props.users.map(user => ( 
    //mistake here this.props.users.map not users.map 
        <UserItem user={user} key={`${user.id}`} />
      ))}
    </div>
  )

}