反应三芯光纤和反应路由器。错误：无法在 ]之外使用 ] 因此，我被告知由于某些技术问题，您不能将react-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> </> ); } 事情是当我应用此功能时，什么也没有发生，我也不知道为什么，我的语法错误吗？这是我在沙箱中的主要code。一切都在Page1.js中，但是由于它的数量而有些混乱。 因此，我被告知由于某些技术问题，您不能将react-router-dom与react-three-fiber一起使用，因为react-router无法访问画布内的提供程序。好吧，我尝试放置一个链接... 因此，从反应中的三个光纤光谱chat @mjf可以帮助我找到答案。因此，@ 0xca0a表示问题在于 '上下文未刺穿协调器。该组件将打开一个新的渲染根目录，该根目录无法访问主机协调器（react-dom）上下文。' 因此，解决此问题的一种方法是将反应路由器上下文桥接到画布中。首先，从反应路由器dom`import {createBrowserHistory}通过'history'库创建上下文。 这里是代码： 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

Question

因此，我被告知由于某些技术问题，您不能将react-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>
    </>
  );
}

事情是当我应用此功能时，什么也没有发生，我也不知道为什么，我的语法错误吗？这是我在沙箱中的主要code。一切都在Page1.js中，但是由于它的数量而有些混乱。

因此，我被告知由于某些技术问题，您不能将react-router-dom与react-three-fiber一起使用，因为react-router无法访问画布内的提供程序。好吧，我尝试放置一个链接...

Answer 1

因此，从反应中的三个光纤光谱chat @mjf可以帮助我找到答案。因此，@ 0xca0a表示问题在于

'上下文未刺穿协调器。该组件将打开一个新的渲染根目录，该根目录无法访问主机协调器（react-dom）上下文。'

因此，解决此问题的一种方法是将反应路由器上下文桥接到画布中。首先，从反应路由器dom`import {createBrowserHistory}通过'history'库创建上下文。