React three fiber and react-router-dom. Error: cannot use <Link> outside of <Router>
React three fiber and react-router-dom. Error: cannot use <Link> outside of <Router>
所以我被告知由于一些技术问题,你不能将 react-router-dom 与 react-three-fiber 一起使用,因为 react-router 无法访问内部的提供程序 canvas.好吧,我试着在我的 canvas 之外放置一个 Link
标签,当元素被点击到另一个页面时它确实会重定向,但显然这适用于所有元素而不是我想要的特定元素。我看过使用门户或转发的示例 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>
</>
);
}
事情是当我应用这个时,没有任何反应,我不知道为什么,我的语法有误吗?
这是我在沙箱中的主要 code。一切都在 Page1.js 中,但由于它的数量有点混乱。
所以从反应三纤维谱 chat @mjf 好心地帮助我找到了这个问题的答案。所以 @0xca0a 说问题是 'context 没有刺穿调解器。该组件打开一个新的渲染根,该根无法访问主机协调器 (react-dom) 上下文。'
因此,解决此问题的一种方法是将 React 路由器上下文桥接到 canvas。首先通过 'history' 库从 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
所以我被告知由于一些技术问题,你不能将 react-router-dom 与 react-three-fiber 一起使用,因为 react-router 无法访问内部的提供程序 canvas.好吧,我试着在我的 canvas 之外放置一个 Link
标签,当元素被点击到另一个页面时它确实会重定向,但显然这适用于所有元素而不是我想要的特定元素。我看过使用门户或转发的示例 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>
</>
);
}
事情是当我应用这个时,没有任何反应,我不知道为什么,我的语法有误吗? 这是我在沙箱中的主要 code。一切都在 Page1.js 中,但由于它的数量有点混乱。
所以从反应三纤维谱 chat @mjf 好心地帮助我找到了这个问题的答案。所以 @0xca0a 说问题是 'context 没有刺穿调解器。该组件打开一个新的渲染根,该根无法访问主机协调器 (react-dom) 上下文。' 因此,解决此问题的一种方法是将 React 路由器上下文桥接到 canvas。首先通过 'history' 库从 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