I am working on an Excel Office Add-in project that uses react as js framework, my add-in is in a customTab made in this customTab there are 2 Taskpane. My goal through the use of the react router dom package is to have a single taskpane.html but that at the click of a taskpane it shows a type of content or the click of the other taskpane shows a different content but always on the same html page. First I defined a js Routes file where I go to implement the react router component to do the routing of the site

import React from 'react'
import { BrowserRouter, Route, Router } from 'react-router-dom'
import { render } from 'react-dom'
import Tree from './Features';

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const Category = () => (
  <div>
    <h2>Category</h2>
  </div>
);

const Products = () => (
  <div>
    <h2>Products</h2>
  </div>
);

export default function Routing() {
  return (
    <Router>
      <Route path="/"><Home /></Route>
      <Route path="/category"><Category /></Route>
      <Route path="/products"><Products /></Route>
    </Router>
  );
}

I later edited the webpack.config.js file so that I could do page routing, adding:

devServer: {
    ...
    historyApiFallback: true,
    ...
}

Finally in the App.js file the App class renders and returns the browser routing react.

import Routing from "./Routes";
  render() {
    return (
      <BrowserRouter>
        <Routing />
      </BrowserRouter>
    );
}

I've tried various approaches to do this routing but haven't found a solution yet. When I go to run this add-in with routing and I try to click and then execute one of the two taskpane the window to the right of the excel remains white / empty. And if I try to do a site inspection the error I find is this:

Uncaught TypeError: m.replaceState is not a function