# Navigation in React component

**URL:** <https://forum.inductiveautomation.com/t/navigation-in-react-component/106834>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [May 29, 2025, 7:16pm UTC](https://forum.inductiveautomation.com/t/navigation-in-react-component/106834 "2025-05-29T19:16:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![torstein](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@torstein](https://forum.inductiveautomation.com/u/torstein)\
**Post date:** [May 29, 2025, 7:16pm UTC](https://forum.inductiveautomation.com/t/navigation-in-react-component/106834/1 "2025-05-29T19:16:51Z")

</div>

I'm making a third party module which uses React components to make a new Navigation menu. Currently I'm using this code to change to a new page:

```ts
onLinkClick(pageName: string) {
    //@ts-ignore
    this.props.store.clientStore.mounts.navigateTo(pageName);
}

```

This works, but it seems looks like a hack. In addition the session variable `page.props.title` is not updated nor the url in the browser.

Are there any better ways of doing it?

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [May 29, 2025, 10:00pm UTC](https://forum.inductiveautomation.com/t/navigation-in-react-component/106834/2 "2025-05-29T22:00:40Z")

</div>

That's the way I'd do it 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 29, 2025, 10:44pm UTC](https://forum.inductiveautomation.com/t/navigation-in-react-component/106834/3 "2025-05-29T22:44:27Z")

</div>

That seems to be what we're doing in the navigation action:

```typescript
                } else if (config.page) {
                    if (config.newTab) {
                        const client: ClientStore = component.view.page.parent;
                        const url = `${client.getBasename()}${config.page}`;
                        window.open(url, "_blank");
                    } else {
                        client.history.push(config.page);
                    }
                } else if (config.view) {
                    client.mounts.navigateTo(config.view, config.params);
                } else if (config.url) {
                    if (config.newTab) {
                        window.open(config.url, "_blank");
                    } else {
                        window.location.href = config.url;
                    }
                }

```

It is apparently intentional that this doesn't change the title/URL:

```python
    /**
     * Can by called by other parts of the API to navigate to a view with a given set of params. Navigating in this way
     * will change the primary view without changing the url path.
     */

```

---

<div class="post-metadata">

**Author:** ![michaeelphillips](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@michaeelphillips](https://forum.inductiveautomation.com/u/michaeelphillips)\
**Post date:** [May 29, 2025, 11:34pm UTC](https://forum.inductiveautomation.com/t/navigation-in-react-component/106834/4 "2025-05-29T23:34:50Z")

</div>

Hi Torstein,

It looks like you're on the right track with your approach to handling navigation in your module. As Bmusson mentioned, it seems to be a common practice. However, if you're looking to update the session variable `page.props.title` and the browser URL, you might want to consider utilizing the `history` object from React Router.