React Router：为来自 Api 的 Json 数据创建单个页面

Question

我有一个应用程序，它从 api 中呈现用户列表，我想做的是当用户单击其中一个列表时，它会通过 React Router 转到该用户信息页面。在 React 上实现它的最佳方法是什么？

我试图解决它，但 none 很好。

代码很敏感，但这是我到目前为止所做的图片：索引组件：

路由到索引
路由到其他页面路由到单页用户页面：
Api 调用
使用 Link 呈现到其单个页面的用户数据

我可以访问页面但无法传递要呈现的数据

Answer 1

使用 react-router-dom 中的 Link 通知您的路由器位置已更改，然后让路由器评估它并确定它是 View/Container 它加载了那个。

这是一个工作示例： https://reacttraining.com/react-router/web/example/basic

以下是有关如何使用路由器获取这些详细信息的一些示例代码：

--- Router 的示例使用和传递它的 props:

 <Route
    exact
    path="/user/view/:id"
    render={props => <CustomerView user={this.state.user} {...props} />
    }
  />

 // By spreading the props into the View you have access to the this.props.match.params.id

--- 在您的用户容器中

  fetchUser = () => {
    const id = this.props.match.params.id;
    postData("/documents/fetch-document", { id: id }).then(res => {
      this.setState({
        document: res,
        ...this.defaultState,
        isLoading: false
      });
    });
  };

Answer 2

所以我所做的是通过 Link 组件在该页面上传递另一个道具这里是一个例子

<Link   style={{ textDecoration: 'none' }} 
        to={ 
              {
                pathname:`${link}/${row.id}`,
                singleData: row
              } 
  }>
     {currentValue}
 </Link>

所以我发现您可以通过将另一个自定义道具作为对象属性添加到 'to' 道具中来传递。应该阅读文档。如果您有问题，请回答

React Router：为来自 Api 的 Json 数据创建单个页面

React Router: Creating a single page for Json Data from Api

reactjs

react-router-v4