将 react-router 与协调器一起使用,例如 react-three-fiber
Using react-router with reconcilers such as react-three-fiber
我正在尝试将 react-router 与 react-three-fiber 一起使用。问题是 <Switch>
组件在添加到 react-three-fiber <Canvas>
元素中时会丢失其上下文。要解决此问题,我可以将开关包装在 Canvas 内的 <Router>
内。当手动输入 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]} />;
你可以使用 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 成为一个 class 组件和结构,如下所示:
<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 一起使用。问题是 <Switch>
组件在添加到 react-three-fiber <Canvas>
元素中时会丢失其上下文。要解决此问题,我可以将开关包装在 Canvas 内的 <Router>
内。当手动输入 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]} />;
你可以使用 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 成为一个 class 组件和结构,如下所示:
<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;