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

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

0 голосов
/ 03 мая 2020

Итак, мне сказали, что вы не можете использовать реактив-маршрутизатор-дом с реактивно-трехволоконным из-за некоторых технических проблем, поскольку реактор-маршрутизатор не может получить доступ к поставщику внутри холста. Ну, я попытался поместить тег Link вне моего холста, и он действительно перенаправляет, когда элементы щелкают по другой странице, но очевидно, что это относится ко всем элементам, а не к определенному c, который я хочу. Я видел примеры использования порталов или пересылки холстов, но я боюсь, что это действительно сбивает меня с толку, и я не знаю, как его применить.

Мне было интересно, возможно ли это, передавая реквизит. Например, вместо использования <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>
    </>
  );
}

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

1 Ответ

0 голосов
/ 12 мая 2020

Итак, по реакции трехволоконного спектра chat @mjf любезно помог мне найти ответ на этот вопрос. Так что @ 0xca0a сказал, что проблема в том, что контекст 'не пробивает примирителей. Компонент открывает новый рендер root, у которого нет доступа к контексту согласования хоста (реагировать на дом). ' Таким образом, можно обойти эту проблему путем соединения контекста реагирующего маршрутизатора с канвой. Сначала контекст создается с помощью библиотеки 'history' из реагирующего маршрутизатора dom `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

...