3

我正在尝试将 react-router 与 react-three-fiber 一起使用。问题是<Switch>组件在添加到 react-three-fiber<Canvas>元素中时会丢失其上下文。为了解决这个问题，我可以将开关包裹<Router>在画布内。手动输入 url 时，路由按预期工作。但是，` 元素现在似乎引用了另一个路由器，并且在单击时不起作用。

有没有办法让<Canvas>参考内部和外部的元素成为同一个路由器？

https://codesandbox.io/s/reach-router-starter-v1-9qcjc

const App = ({ router }) => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        <Canvas>
          <Plane color="black" position={[-5, 0, 0]} />
          <Router>
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/dashboard">
                <Dashboard />
              </Route>
            </Switch>
          </Router>
        </Canvas>
      </div>
    </Router>
  );
};

const Home = () => <Plane color="red" position={[0, 0, 0]} />;
const About = () => <Plane color="green" position={[0, 0, 0]} />;
const Dashboard = () => <Plane color="blue" position={[0, 0, 0]} />;
4

1 回答 1

1

您可以使用 npm i wouter 而不是 react-router-dom https://www.npmjs.com/package/wouter

像通常使用 react-router-dom 一样包装所有内容，但使用 wouter 代替。请注意，顶级路由器组件是完全可选的。

应用程序.js：

import Nav from './Nav'
import { Router, Switch, Route } from 'wouter';

使 App.js 成为一个类组件和结构，如下所示：

<Nav />
<Router/>
<Switch />
 <Route exact path="/somelink" component={Somecomponent}/>
<Switch />
<Router/>

export default App;

Nav.js 组件：

import { Link } from 'wouter'
const Nav = () => {
    return (
        <nav className="navigation">
            <ul>
                <li>
                    <Link to="/somecomponent">...</Link>
                </li>
            </ul>
        </nav>
    )
}

export default Nav;
于 2021-01-03T11:23:03.210 回答