React 组件根据 URL 显示动态数据答案

【问题标题】：React component displaying dynamic data based on URLReact 组件根据 URL 显示动态数据
【发布时间】：2019-04-16 14:54:04
【问题描述】：

我想创建一个动态组件来显示来自 json 文件的数据，该文件依赖于 url。而不是手动创建和存储每个页面。

例如：https://jsonplaceholder.typicode.com/posts

页面路由：/1 页面将显示：

标题 = unt aut facere repellat provident occaecati excepturi optio reprehenderit

正文 = quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto.

如何从 json 中返回特定数据？这是一个快速的小提琴：https://jsfiddle.net/pb2tL7ma/

任何建议将不胜感激！

【问题讨论】：

请问如何从URL中提取参数？您应该考虑将react-router 之类的路由器添加到您的应用程序中，然后您可以根据Route 访问这些参数
@ZekeDroid 我知道如何提取url参数，我将如何使用该参数显示单个数据并将其映射到组件？
任何答案对您有用吗？如果是这种情况，请考虑 accepting one of them。

标签： javascript json reactjs

【解决方案1】：

一种方法是使用React Router with URL parameters 并为pages 数组中的每个页面创建一个Link，然后使用此URL 参数提取您要查看的页面。

示例 (CodeSandbox)

class App extends React.Component {
  state = {
    pages: []
  };

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res => {
      this.setState({ pages: res.data });
    });
  }

  render() {
    const { pages } = this.state;

    if (pages.length === 0) {
      return null;
    }
    return (
      <BrowserRouter>
        <div>
          <Route
            exact
            path="/"
            render={() => (
              <ul>
                {pages.map(page => (
                  <li>
                    <Link to={`/${page.id}`}>{page.title}</Link>
                  </li>
                ))}
              </ul>
            )}
          />
          <Route
            path="/:page"
            render={({ match }) => {
              const pageParam = Number(match.params.page);
              const page = pages.find(p => p.id === pageParam);

              return <div>{page.title}</div>;
            }}
          />
        </div>
      </BrowserRouter>
    );
  }
}

【讨论】：

【解决方案2】：

尝试使用react-router-dom。在App.js 中添加一条路线，如下所示：

<Route path='/posts/:id' component={DynamicData} />

然后您可以通过以下方式在您的DynamicData 组件中获取id：

this.props.match.params.id

【讨论】：

【解决方案3】：

如上所述，您可以为此使用react-router-dom，或者基本上只使用Window.location 对象。它已经开箱即用，因此您不需要外部依赖项。

【讨论】：