Использование response-router с согласователями, такими как react-three-fiber

Question

Я пытаюсь использовать реактивный маршрутизатор с реактивным трехкомпонентным волокном. Проблема в том<Switch> компоненты теряют свой контекст при добавлении внутрь реактивного трех волокон <Canvas>элемент. Чтобы исправить это, я могу обернуть переключатель внутри<Router>внутри Canvas. И маршруты работают, как ожидалось, при вводе 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]} />;

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;