Migrating from custom Router implementation to Data API Router

[aleksolutions]

Hi guys,

I am currently making a plugin in your Cloud environment "Forge".

The problem I am having, is that in their documentation, to do routing they use the "Router" component with a custom implementation. See below: Documentation

import React, { Fragment, useEffect, useState } from "react";
import { view } from "@forge/bridge";
import { Router, Route, Routes } from "react-router";

function App() {

  const [history, setHistory] = useState(null);

  useEffect(() => {
    view.createHistory().then((newHistory) => {
      setHistory(newHistory);
    });
  }, []);

  const [historyState, setHistoryState] = useState(null);

  useEffect(() => {
    if (!historyState && history) {
      setHistoryState({
        action: history.action,
        location: history.location,
      });
    }
  }, [history, historyState]);

  useEffect(() => {
    if (history) {
      history.listen((location, action) => {
        setHistoryState({
          action,
          location,
        });
      });
    }
  }, [history]);

  return (
    <div>
      {history && historyState ? (
        <Router
          navigator={history}
          navigationType={historyState.action}
          location={historyState.location}
        >
          <Routes>
            <Route path="/page-with-path" element={<PageWithPath />}></Route>
            <Route path="/" element={<Home />}></Route>
          </Routes>
        </Router>
      ) : (
        "Loading..."
      )}
    </div>
  );
}

Considering that in order to do routing in their applications we need their "history" object, my question is, is it possible to make this work with the new Data API’s?

I have tried to do some testing on my own, but honestly I don't know what exactly I have to implement, so I ask for your help, as there are some features that I would like to have and that with their current implementation I cannot.

Many thanks!