使用惯性从 URL 获取数据

Question

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

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

单击此按钮，link 将如下所示：/item/156654

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

我知道在 React 中有一个函数 let history = useHistory();，但是这种方法对我不起作用。有什么选择？

Answer 1

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

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

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

Answer 2

<InertiaLink /> 不为打开的页面提供任何上下文，因此您需要手动解析 URL。在下面的示例中，您可以找到 parsePageId() 函数，该函数实际上在 an optimal way.

中解析位置路径

// solution from 
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" />

使用惯性从 URL 获取数据

Get data from URL using Inertia

inertiajs

reactjs