Thanks @AaronCollier, that example helped a lot.
For posterity, in case someone else is confused, it’s all about the view from the @forge/bridge, which provides the connection, for the app in the iframe, with the URL change in the main parent window.
I have these pages set in manifest.yml:
pages:
- title: "In Progress"
route: "in-progress"
- title: "Done"
route: "done"
I’m using Preact so it’s a bit simpler than the React routing in the example. I can just trigger a route change with route().
At the top of my App.js I import the view:
import { requestJira, view } from "@forge/bridge.js";
After that:
const App = (props /*: Props */) /*: string */ => {
useEffect(() => {
view.createHistory().then((history) => {
// The first time the history is set, we need to manually route
route(history.location.pathname);
// From then on, we can listen to changes in the URL of the main parent window
history.listen((location, action) => {
route(history.location.pathname);
});
});
}, []);
return html`
<${AppProvider} >
<${Router}>
<${Counter} count="2" path="/in-progress" />
<${Counter} count="3" path="/done" />
</${Router}>
</${AppProvider} >
`;
};
export default App;
The first time one of the pages is clicked, the app in the iframe loads but the URL of the main parent window is unchanged - i.e. the path is “/”, for which there is no route. Then the URL of the main parent window is changed to the page path and that change is picked up with history.listen(). The app actually loads blank (there is no matching route), then quickly loads the actual page route.