reactjs - React 三纤和 react-router-dom。错误 : cannot use outside of

Question

所以我被告知由于一些技术问题，你不能将 react-router-dom 与 react-three-fiber 一起使用，因为 react-router 无法访问 Canvas 内的提供程序。好吧，我试着放一个 Link标记在我的 Canvas 之外，当元素被点击到另一个页面时它会重定向，但显然这适用于所有元素而不是我想要的特定元素。我看过使用门户或转发 Canvas 的示例，但恐怕这对我来说真的很困惑，我不知道如何应用它。

我想知道这是否可以通过传递 Prop 来实现。例如而不是使用 <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>
    </>
  );
}

问题是当我应用它时，没有任何反应，我不知道为什么，是我的语法错误吗？这是我的主要code在沙盒中。一切都在 Page1.js 中，但由于它的数量有点困惑。

Answer 1

所以从 react 三纤维光谱chat @mjf 好心地帮助我找到了这个问题的答案。所以 @0xca0a 说问题是 'context 没有刺穿调解器。该组件打开一个新的渲染根，该根无法访问主机协调器 (react-dom) 上下文。”因此，解决此问题的一种方法是将 React 路由器上下文桥接到 Canvas 中。首先，上下文是通过 react router 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