0

我正在使用InertiaJs库创建链接，如下所示：

<InertiaLink href={`/item/`+ itemId}>Go to the page</InertiaLink>

单击此链接，链接将如下所示：/item/156654

问题：如何itemId使用 Inertia 从上面的链接中获取 (156654,54654654, ... )？

我知道在 React 中有一个 function let history = useHistory();，但是这种方法对我不起作用。存在什么替代方案？

4

2 回答 2

2

<InertiaLink />不为打开的页面提供任何上下文，因此您需要手动解析 URL。在下面的示例中，您可以找到以最佳方式parsePageId()实际解析位置路径的函数。

// solution from https://stackoverflow.com/questions/4758103/last-segment-of-url-in-jquery
const parsePageId = (path) => path.substring(path.lastIndexOf('/') + 1)

const Page = () => {
  const pageId = parsePageId(window.location.pathname)
  
  // will render "Page id: js", because snippet href is "https://stacksnippets.net/js"
  return (
    <p>Page id: <b>{pageId}</b></p>
  )
}


ReactDOM.render(<Page />, document.querySelector("#root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

于 2021-01-09T10:46:27.337 回答
1

您可以使用该window.location对象获取实际的 URL，然后应用简单的解析来获取项目 ID：

const { pathname } = window.location
const splitPathname = pathname.split("/")
const itemId = splitPathname[splitPathname.length - 1]

我们只是获取由“/”分隔的 URL 的所有部分并获取最后一个部分，这将是项目 ID。

于 2021-01-08T16:25:47.620 回答