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!

[sergiodxa]

I moved the discussion from the Remix repo to the React Router one since this has nothing to do with Remix.

But also since your issue with related to that Forge thing, and not actually RR I think you should open the issue with them, the React Router team has no control over that Atlassian product.