React-router-dom in Jira Cloud plugin

Hi!
I stuck with routing in my atlassian connect app.
I have SPA with pages:
<plugin.balse.url>/items - all items are displayed in table with links to every single item
<plugin.balse.url>/items/(id-of-item) - page with single item

when I run this app locally everything is working, but when I deploy my app to my cloud instance, my base url path is changed(because my app is displayed in iframe) to
https://(jira-site).atlassian.net/plugins/servlet/ac/my-plugin/items

All items in the table are shown correct, but when I clicked on the separate item, I recieve 404 error

I think the problem with displaying my app in iframe and (in this case) react-router wouldn’t work here.
I’m not sure about that, so If anyone uses routing in cloud app, please help me

1 Like

We have tried with Hash tag approach in our app and it worked for us.

https://{domain}.atlassian.net/plugins/servlet/ac/{key}/app-entry?project.key=DEMO&project.id=10000#!/Manage/{newpage}

constructor(props) {
    super(props);
    if (window.AP) {
      window.AP.getLocation(location => {
        
        // Below condition is mandatory for reload application on same page
        if (location) {
          const locParts = location.split("#!");
          if (locParts.length > 1) {
            this.props.history.push(locParts[1]);
          }
        }
      });
      this.props.history.listen(location => {
        let loc = location.pathname;
        if (window.AP) {
          if (location.search) {
            loc += location.search;
          }
          const jiraState = window.AP.history.getState();
          if (loc !== jiraState) {
            window.AP.history.pushState(loc);
          }
        }
      });
      // This will listen instance hash change event and open the page accordingly
      window.AP.history.popState(e => {
        if (e && e.newURL) {
          this.props.history.push(e.newURL);
        }
      });
    }
  }
1 Like

Thank you! You helped me a lot!