如何将 id 参数添加到 html 页面的 url？答案

【问题标题】：How do I add id parameters to the url of a html page?如何将 id 参数添加到 html 页面的 url？
【发布时间】：2022-09-27 19:03:11
【问题描述】：

我想从我正在使用 ReactJS 和 webpack 创建的网站访问 URL 参数。我有多个网页，一个网页是通用博客文章视图页面。我希望能够通过博客 ID 加载博客文章，而不是为每个博客文章创建多个页面。当我这样做时，虽然页面需要另一个带有 blog_id 的页面。例如，我的文章/博客 ID 将是 test_blog，它的外观和我的 URL 将是

ex: https://www.example.com/anotherpage/test_blog

因此，正如您所看到的，我的问题是服务器会将 test_blog 视为子页面而不是 id 参数。

我知道 ReactJS 有一个 Link 组件可以处理导航到不同的反应页面，但这似乎只适用于单页面反应应用程序。我正在开发一个多页面反应应用程序，因为我希望在我生成的每个页面上都有元数据。

我是否必须将 JavaScript 代码添加到 html 页面本身才能绕过它，或者是否有 ReactJS 解决方案？

标签： javascript html reactjs

【解决方案1】：

如果我理解正确，你可以像我一样做

export const fetchData = async (newFetchOffset) => {
// console.log(fetchOffset);
const res = await axios(`https://xoosha.com/ws/1/test.php?offset=${newFetchOffset}`)
return res.data

}

存储库位于THIS IS A LINK

【讨论】：

【解决方案2】：

为子页面添加路由定义

<Route path="/subpage/:id">
  <SubPageComponent />
</Route>

现在在子页面组件中：

import { useParams } from 'react-router';

export default function SubPageComponent() {
  const { id } = useParams();
}

另外，为什么路由中有 .html，请阅读 react 的文档和任何路由库：https://v5.reactrouter.com/web/example/url-params

对于非反应路由器方式：

window.location.href.split('/').reverse()[0]

【讨论】：

是的，我了解如何在反应中使用路由，但我的问题是当我想将元数据添加到 html 时。 Twitter 和 Facebook 不运行 js 来显示 SEO 信息。这使我无法在反应中使用动态元数据。因此，我创建了单独的 html 页面，这些页面由 react 组件生成，每个页面都有自定义元数据。现在我在获取我的 html 网页所需的参数时遇到问题。
为什么现在只使用香草JS？ window.location.href.split('/').reverse()[0] 会做