React-router-dom in Jira Cloud plugin

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

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.


constructor(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.listen(location => {
        let loc = location.pathname;
        if (window.AP) {
          if ( {
            loc +=;
          const jiraState = window.AP.history.getState();
          if (loc !== jiraState) {
      // This will listen instance hash change event and open the page accordingly
      window.AP.history.popState(e => {
        if (e && e.newURL) {
1 Like

Thank you! You helped me a lot!

I appreciate the response but could you be more elaborate here? I assume this is a class constructor that extends some component but which component did you extend?

It’s not so complicated actually. Simply use HashRouter as default router from the router-dom package:

import {
HashRouter as Router,
} from ‘react-router-dom’;

You can use react-router normally then

1 Like