React three fiber和react-router-dom。错误：不能在<Router>之外使用<Link>。

Question

据我所知，由于react-router无法访问画布中的provider，因此不能在react-three-fiber中使用react-router-dom。我试图将标签放在画布外部，虽然它可以在元素被点击时重定向到另一页，但显然这适用于所有元素而不是特定的元素，这不是我想要的。我看过使用 portals 或 forwarding canvases 的示例，但我很困惑，不知道如何应用它。

我想知道是否可以通过传递属性来实现这一点。例如，不使用<Link to = "/Page2">，而是<Link to = "{link}">，然后在组件内定义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>
    </>
  );
}

我尝试应用这个代码，但没有效果，我不知道为什么，我的语法有误吗？ 这是我在sandbox中的主要代码。所有内容都在Page1.js文件中，但由于内容很多，有点令人困惑。

- Sophia98

Answer 1

所以从react three fiber光谱聊天中，@mjf已经帮我找到了答案。所以@0xca0a说问题是'上下文无法穿透协调器。组件打开一个新的呈现根，该呈现根无法访问主机协调器（react-dom）上下文。'因此，解决此问题的方法是通过将react路由器上下文桥接到画布中。首先，通过来自react路由器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

- Sophia98