How do you routing you React app in a Forge Custom UI iFrame

As in the title, how do you routing for your React app in a Forge Custom UI IFrame?

Do you use Redux to store the current view, or use the react-router-dom to route the app? Or do you have any other suggestions?

2 Likes

Hi @nhac.tat.nguyen ,

Both approaches should work. If you use react-router-dom, you may add entries into the browser’s back button, so you should decide if that’s the right behavior for your app.

1 Like

Thanks, @mventnor,

With the approach of using react-router-dom, I feel like the UX is not good.

The problem here is that the constructed URL for any Link will be referenced with the src of the IFrame itself (not the parent Atlassian site), so whenever the user chooses to Open in new tab, it will not lead to that exact location where they expected.

I asked this question mainly because of that reason :smiley:

1 Like

The best choice for routing now would be react-router or react-router-dom

Since @forge/bridge version 1.5.0 (introduced on 2 June 2021), we have the createHistory API to integrate React Router between IFrame and the current page.

Document: Add routing to a custom UI full page app

2 Likes

following this tutorial Add routing to a custom UI full page app , when I use useLocation to get the state, the state is always null:

function Link({ to, children }) {
    const navigate = useNavigate();
    return (
        <a
            href={to}
            onClick={(event) => {
                event.preventDefault();
                navigate(to,{state:{id:1, name:"test"}});
            }}
        >
            {children}
        </a>
    );
}

function PageWithPath() {
    const location =  useLocation();
    console.log(location.state)
    return <h2>Page with path</h2>;
}

is @forge/bridge(v2.1.3) compatible with react-router-dom(v6)? I noted that the version of history library is not the same. can you please help me with this? Thank you

3 Likes