Реагировать на три волокна и реагировать-маршрутизатор-дом. Ошибка: невозможно использовать <Link> вне <Router>

Question

Мне сказали, что вы не можете использовать response-router-dom с react-three-fiber из-за некоторых технических проблем, поскольку react-router не может получить доступ к провайдеру внутри холста. Ну я попытался поставитьLinkза пределами моего холста, и он перенаправляет, когда элементы щелкают на другой странице, но, очевидно, это относится ко всем элементам, а не к конкретному, что я хочу. Я видел примеры использования порталов или пересылки полотен, но боюсь, что это действительно сбивает меня с толку, и я не знаю, как это применить.

Мне было интересно, возможно ли это, пропустив реквизит. Например, вместо использования<Link to = "/Page2"> это было бы <Link to = "{link}">а затем я определил бы ссылку внутри компонента. например<Cube link = "/Page2">. Вот упрощенная версия моего кода:

export default function Page1({ link }) {

  return (
    <>

 <Link to = "/page2">
      <Canvas>

        <ambientLight />
        <pointLight position={[10, 10, 10]} />

        <Suspense fallback={<Fallback />}>

          <Cube position={[-1.2, 0, 0]} time={1000} link="/Page2" />

        </Suspense>
      </Canvas>
      </Link>
    </>
  );
}

Дело в том, что когда я применил это, ничего не происходит, и я не знаю почему, мой синтаксис неправильный? Вот мой основной код в песочнице. Все есть в Page1.js, но это немного сбивает с толку из-за его количества.

Answer 1

Итак, из чата React 3 fiber Spectrum @mjf любезно помог мне найти ответ на этот вопрос. Итак, @0xca0a сказал, что проблема в том, что "контекст не проникает в согласователи. компонент открывает новый корень рендеринга, у которого нет доступа к контексту согласования хоста (response-dom).' Таким образом, можно решить эту проблему путем объединения контекста маршрутизатора реакции в холст. Сначала контекст создается с помощью библиотеки 'history' из доменного маршрутизатора реакции ʻimport { createBrowserHistory }.

Вот код:

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import App from "./App";
import { createBrowserHistory } from "history";
import { Router, Route } from "react-router-dom";

const rootElement = document.getElementById("root");
const customHistory = createBrowserHistory({
  // basename: config.urlBasename || ""
});
ReactDOM.render(
  <Router history={customHistory}>
    <Route
      component={({ history }) => {
        window.appHistory = history;
        return <App />;
      }}
    />
  </Router>,
  rootElement
);

import React, { Suspense } from "react";
import { Canvas } from "react-three-fiber";
import Cube from "./cube";

export default function Page1() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Suspense fallback={null}>
        <Cube
          position={[-1.2, 0, 0]}
          onClick={() => window.appHistory.push("/page2")}
        />
      </Suspense>
    </Canvas>
  );
}

Вот песочница @mjf для рабочего кода https://codesandbox.io/s/cool-yonath-j9u1m?from-embed