react-router - 将 react-router 与协调器一起使用，例如 react-three-fiber

Question

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

有没有办法让元素在<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]} />;

Answer 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;