如何在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>
    )
  }

}

UserList.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为阵列中的每个UserItem渲染一个user分量。每个UserItem只是呈现一个特定于每个用户的路由，如果该路由被触发，将呈现User组件。

但是如果我没有弄错的话，如果路线不是UserList，那么/将不会被渲染，所以如果有人访问user/...，内部路线将不会存在。

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

如果你从exact的路线中删除App关键字，我想你会得到你想要的结果。在这种情况下，打开/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>
  )

}