Javascript 基于URL显示动态数据的React组件

我想创建一个动态组件，根据url显示json文件中的数据。而不是手动创建和存储每个页面

例如：

页面路径：

/1

该页面将显示：

Title=

unt aut facere repellat provident occaecati EXPEPTURI optio REPREREREPHENDERIT

正文=

quia和SUSCCIPIT\n根据经验和\nREPENDERIT MOLESTIA ut quas totam\nRERUM est autem sunt rem eveniet Architector重新出现的问题

如何从json返回特定数据？ 这里有一把快速小提琴：

---

如有任何建议，将不胜感激

尝试使用

react路由器dom

。在

App.js

中添加路线，如下所示：

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

---

如上所述，您可以使用

react router dom

，或者基本上只使用对象。

---

它已经开箱即用，因此您不需要外部依赖项。

一种方法是为

页面

数组中的每个页面使用并创建一个

链接，然后使用此URL参数提取您要查看的页面

示例（）

类应用程序扩展了React.Component{
状态={
页码：[]
};
componentDidMount（）{
axios.get(`https://jsonplaceholder.typicode.com/posts`)。然后（res=>{
this.setState（{pages:res.data}）；
});
}
render（）{
const{pages}=this.state；
如果（pages.length==0）{
返回null；
}
返回(
(

{pages.map（页面=>(

{page.title}

))}

)}
/>
{
const pageParam=编号（match.params.page）；
const page=pages.find（p=>p.id==pageParam）；
返回{page.title}；
}}
/>
);
}
}
问题是如何从URL中提取参数？你应该考虑在你的应用程序中添加一个路由器，比如
react router
，然后你可以根据
Route
@ZekeDroid访问这些参数。我知道如何提取url参数，我如何使用该参数来显示一个单一的数据并将其映射到组件？有任何答案对你有用吗？如果是这样的话。
this.props.match.params.id

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