Routing doesn't seem to work in React based Addins

Question

I have created a brand new Excel addin using the Yeoman generator and I have selected the React Task pane option.

I am trying to build an extension that will have multiple pages for different features of the addin so I installed reach router and wrote some basic routing as I would do for a regular React app. However, I get this Cannot GET /insert error displayed in the addin pane in Excel whenever try to access a route.

This is my code in the App.js file:

return (
      <div>
        <nav>
          <Link to="/">Login</Link> | <Link to="insert">Insert</Link> | <Link to="update"> Update</Link> |{" "}
          <Link to="remove">Remove</Link>
        </nav>
        <Router>
          <Login path="/" />
          <Insert path="insert" />
          <Remove path="remove" />
          <Update path="update" />
        </Router>
        <Button
          className="ms-welcome__action"
          buttonType={ButtonType.hero}
          iconProps={{ iconName: "ChevronRight" }}
          onClick={this.click}
        >
          Run
        </Button>
      </div>
    );

I have only included the return statement since everything else is pretty much the default starter code I got from using Yeoman Generator. This issue is probably not linked to Excel Addins directly but rather to routing with React. I have only used reach router for not too complex routing in my projects, but my code seems to be valid, so I am wondering if this isn't an issue with the manifest.xml file, but I am not sure.

Any idea where the problem could be coming from?

Thank you for your time.

Answer 1

I managed to solve my own issue, so I'm posting my solution here for those who might encounter this problem.

I'm not sure why, but essentially reach router does not work for Excel Addins. I personally didn't find any configuration that would make it work. This might have something to do with browser that runs your adding in a side pane, that may be old or incompatible in some way.

So, anyway, the solution I found was I replaced reach-router with react-router-dom and used the HashRouter component instead of the usual Router. If you are only doing basic routing, using HashRouter over Router shouldn't require you to modify your code. You can't just use the regular Router component though, unfortunately it just doesn't work.

Hope this helps.