如何在 React VR 中使用 React Router?
How to use react React Router with React VR?
我正在尝试弄清楚如何将 React Router 与 React VR 相结合。
首先,我应该使用react-router
dom
/ native
吗?目前尚不清楚,因为 React VR 构建在 React Native 之上,但在浏览器中运行。
这是我遇到问题的代码。
import React from 'react';
import { AppRegistry } from 'react-vr';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import Landing from './components/Landing';
import Video from './components/Video';
export default class WelcomeToVR extends React.Component {
render() {
return (
<Router>
<Route exact path={'/vr/'} component={Landing} />
<Route exact path={'/vr/video/'} component={Video} />
</Router>
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
以上代码returns在/vr/
上打开浏览器出现如下错误:
React Router 的作者 Ryan Florence 在这里解释了他是如何做到的:https://twitter.com/ryanflorence/status/808890440929771520
虽然我不知道图书馆。
我根据 使用 react-router 4.1.2 提到的 Ryan Florence 视频提出了这个解决方案。
在主应用程序组件中:
import { MemoryRouter, Redirect, Route, Switch } from 'react-router';
...
<MemoryRouter>
...
</MemoryRouter>
在使用 VrButton 的组件中:
export class NavBtn extends React.Component {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
render() {
const { to } = this.props;
const onClick = () => this.context.router.history.push(to);
return (
<VrButton onClick={onClick}>
...
</VrButton>
);
}
}
npm 中有 react-router-vr 包,但看起来只是占位符。遗憾的是,目前不支持浏览器 URL.
React-VR 不使用其他应用程序的正常历史记录 APIs。 Memory Router 是上面列出的选项,但我推荐条件渲染。
您可以使用本机模块中的历史记录 API 将信息加载到 URL。
我正在尝试弄清楚如何将 React Router 与 React VR 相结合。
首先,我应该使用react-router
dom
/ native
吗?目前尚不清楚,因为 React VR 构建在 React Native 之上,但在浏览器中运行。
这是我遇到问题的代码。
import React from 'react';
import { AppRegistry } from 'react-vr';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import Landing from './components/Landing';
import Video from './components/Video';
export default class WelcomeToVR extends React.Component {
render() {
return (
<Router>
<Route exact path={'/vr/'} component={Landing} />
<Route exact path={'/vr/video/'} component={Video} />
</Router>
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
以上代码returns在/vr/
上打开浏览器出现如下错误:
React Router 的作者 Ryan Florence 在这里解释了他是如何做到的:https://twitter.com/ryanflorence/status/808890440929771520
虽然我不知道图书馆。
我根据
在主应用程序组件中:
import { MemoryRouter, Redirect, Route, Switch } from 'react-router';
...
<MemoryRouter>
...
</MemoryRouter>
在使用 VrButton 的组件中:
export class NavBtn extends React.Component {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
render() {
const { to } = this.props;
const onClick = () => this.context.router.history.push(to);
return (
<VrButton onClick={onClick}>
...
</VrButton>
);
}
}
npm 中有 react-router-vr 包,但看起来只是占位符。遗憾的是,目前不支持浏览器 URL.
React-VR 不使用其他应用程序的正常历史记录 APIs。 Memory Router 是上面列出的选项,但我推荐条件渲染。
您可以使用本机模块中的历史记录 API 将信息加载到 URL。