如何将道具传递给 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

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

Answer 2

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>
  )

}

Answer 3

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

但是如果我没记错的话，如果路由不是 /，UserList 将不会被渲染，所以如果有人访问 user/...，内部路由将不会被渲染实际上并不存在。

本质上，此应用不会呈现任何内容。

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

你的问题是关于通过路由将 props 传递给组件，你使用的机制是正确的。

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

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

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

Answer 4

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

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

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

How to pass props to nested routes in React Router 4?

javascript

reactjs

react-router

react-router-v4

react-router-dom