routerLink on button not working

[mgatto0]

I have a button and an IonRouterLink on a page, both with the same routerLink attributes. The router link navigates forward, but the button does not.

The button:

<IonCard>
    <IonCardContent>
        <IonItem>
            ...
            <IonButton expand="block"  routerLink={`/scan/54321`} routerDirection={"forward"}>Open WO</IonButton>
	    </IonItem>
    </IonCardContent>
</IonCard>

The working router link:

<IonRouterLink routerLink={`/scan/54321`} routerDirection={"forward"}>54321</IonRouterLink>

How can I get the button to render the route?

I’m using:

• “react”: “^17.0.1”
• “react-dom”: “^17.0.1”
• “react-router”: “^5.2.0”
• “react-router-dom”: “^5.2.0”
• “react-scripts”: “4.0.2”

[mhartington]

I’m not sure I understand your question? Can you provide more context or better, a sample app?

[mgatto0]

Here’s a screenshot of my prototype, for context. The IonRouterLink is rendered in the table as hyperlinked numbers, and causes the target page to render. The IonButton at the top of the screenshot does not go anywhere when clicked.

I want to navigate to a new page upon the button click, but various recommended methods won’t render the target page. So, I went with the basic routerLink attribute on the IonButton thinking it would work like the numbered links in the below screenshot.

[mhartington]

Screen shots don’t really tell me enough. Please try to reproduce this in a small sample.

Mike Hartington