0

I am using InertiaJs library to create links as in the following:

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

Clicking on this, the link will look like this: /item/156654

Question: How to get the itemId(156654,54654654, ... ) from the link above using Inertia?

I know that in React there is a function let history = useHistory();, but this approach doesn't work for me. What alternative exists?

Aaron Morefield
  • 952
  • 10
  • 18
Asking
  • 3,487
  • 11
  • 51
  • 106
  • Just to clarify: when you say "Get The ItemId From the link", do you mean within this scope, or on another page? https://stackoverflow.com/questions/58840998/how-to-send-information-from-the-vue-js-file-to-the-controller-like-an-id-larav This seems to have the answer you need – Aaron Morefield Dec 31 '20 at 18:58
  • @AaronMorefield, i want to get the id in another age, in the page where user will be redirected when will click on `Go to the page` – Asking Dec 31 '20 at 19:39
  • If that is the case, can you post some of the code for where you would want to receive the code so that we can assist? – Aaron Morefield Dec 31 '20 at 21:21
  • @AaronMorefield, the idea is simple. I have the Component `A` whare i have this code: `Go to the page`, clicking on the link i will be redirected to the component `B`. So, i want to know how to get the Id from URL in the component B. Please, tell me if you got me. Do you know a solution? – Asking Jan 02 '21 at 16:45
  • My guess is that you'd have to do some manual URL parsing, which seems simple enough to do :) – Lucas Jan 03 '21 at 12:43
  • @Asking Did you tried setting ItemId in local storage before calling InertiaLink in component A and then retrieving it in component B? I think that will be the easiest way. – HeroicHitesh Jan 06 '21 at 20:05

2 Answers2

2

<InertiaLink /> don't provide any context to opened page, so you need to parse URL manually. In the example below you can find parsePageId() function which actually parse location path in an optimal way.

// 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" />
Alexandr Tovmach
  • 3,071
  • 1
  • 14
  • 31
1

You can use the window.location object to get the actual URL and then apply a simple parsing to obtain the item id:

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

We are just getting all the parts of the URL separated by "/" and getting the last one, which will be the item id.

David Fernández Ortiz
  • 691
  • 4
  • 7