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?
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?
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.
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
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
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