React Router：从 Api 为 Json 数据创建单个页面答案

【问题标题】：React Router: Creating a single page for Json Data from ApiReact Router：从 Api 为 Json 数据创建单个页面
【发布时间】：2019-05-20 14:12:57
【问题描述】：

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

我试图解决它，但没有一个好结果。

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

到索引的路由
路由到其他页面路由到单页用户页面：
API 调用
通过链接到其单个页面的用户数据呈现

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

【问题讨论】：

我们可以看看你到目前为止尝试了什么吗？
我用我正在尝试做的事情的图片编辑了这个问题

标签： reactjs react-router-v4

【解决方案1】：

所以我所做的是通过链接组件在该页面上传递另一个道具，这是一个示例

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

所以我发现您可以通过将另一个自定义道具添加为“to”道具中的对象属性来传递它。应该阅读文档。有问题直接回答

【讨论】：

【解决方案2】：

使用react-router-dom 中的Link 通知您的路由器位置已更改，然后让路由器对其进行评估并确定它是从中加载的视图/容器。

这是一个工作示例： 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
      });
    });
  };

【讨论】：

感谢您的链接，但这实际上是网站的基础。我想要的是从 api 呈现用户数据，当他们点击他们的个人资料时，它会导致他们的单身页面。
您就是这样做的。将它们链接到他们的页面后，您可以访问从路由器向组件传递道具 ---- !this.isLoggedIn( ) ? ( ) : ( ) } /> ---- 在 DocumentView 中我可以得到这个。 props.match.params.id 并将其传递给 post 请求以进行查询