Navigation in React component

Module Development
1

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:

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?

2

That's the way I'd do it :man_shrugging:

1 Like
3

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

                } 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:

    /**
     * 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.
     */
4

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.