Creating a multi page custom UI app #Codegeist

Forge
1

According to https://developer.atlassian.com/platform/forge/custom-ui-bridge/router/ it looks like you can only redirect the user to a completely different page in the browser.

Is it possible to create a React app that has multiple routes - and use React Router to handle navigation - and let user switch to different pages by clicking them (or redirecting programmatically) but without a full page reload - only within the forge app itself?

2

That is possible and there’s actually a tutorial about adding routing using React Router in the docs:

https://developer.atlassian.com/platform/forge/add-routing-to-a-full-page-app/

3 Likes
3

@Abdessamad 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 are not the same. can you please help me with this? Thank you