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

我有这样一个组件树：

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

}

---

您应该在UserItem组件中使用

this.props.users

导出默认函数（{users}）{
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>
  )

}

返回(
{this.props.users.map（user=>）
//这里的错误是this.props.users.map而不是users.map
))}
)
}

我不确定您在这里想要实现什么。当路由为

/

时，应用程序将呈现

用户列表。
UserList
为数组中的每个
user
呈现一个
UserItem
组件。每个
UserItem
仅呈现每个用户特定的路由，如果该路由被触发，该路由将呈现
user
组件

但是如果我没有弄错的话，如果路由不是
/
，则不会呈现
用户列表
，因此如果有人访问
用户/…
，则内部路由实际上不存在

本质上，这个应用程序不会呈现任何内容

如果你在
应用程序
中从路线中删除
确切的
关键字，我想你会得到你想要的结果。在这种情况下，打开
/user/
将为该用户呈现
user
元素

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

}/>

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

请参见此处的工作代码：
我不确定，但您是否可以像下面这样传递道具，这里我将道具传递给渲染，然后传递给用户组件

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

}/>
users.map
不是一个错误，因为他正在使用解构赋值来获取users变量。在像这样的无状态函数组件中，传递给函数的参数是
props
对象。通过使用
{users}
，OP从道具中提取
用户
，并丢弃其余的。在
用户项中不需要使用
this.props.users
。OP正在使用解构分配从传递给SFC的道具中提取
user
。感谢您的回复Shishir，您对“精确”道具的理解是正确的。现在的问题是，当路由为/user/：userName时，
UserItem
s将可见。我想隐藏项目，只显示主
User
组件。这里是更新后的沙盒：
UserItem
s将对所有路由可见，因为您的
UserList
设计用于为传递给它的数组中的每个
user
呈现一个
UserItem
实例（第21行）。如果您根本不想呈现
UserItem
，可以将路由声明移动到
UserList
。请参阅注意，您的
链接
元素也位于
UserItem
中，因此如果希望它们可见，您可能希望将它们移动到适当的位置。总之，您希望在
user/：userName
route上显示的任何内容都应位于
route
元素下。
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>
  )

}

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