Question

我尝试将react-router与react-three-fiber一起使用。问题是，<Switch>组件在添加到反应三纤维<Canvas>元素中时会丢失上下文。为了解决这个问题，我可以将开关包装在Canvas中的<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。请注意，顶级路由器组件是完全可选的。

App.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;

将react-router与诸如react-three-fiber

1 个答案: