如何在 React VR 中使用 React React Router？答案

【问题标题】：How to use react React Router with React VR?如何在 React VR 中使用 React React Router？
【发布时间】：2017-05-12 06:51:42
【问题描述】：

我正在尝试弄清楚如何将 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);

以上代码在/vr/上打开浏览器时返回如下错误：

【问题讨论】：

标签： react-router react-360

【解决方案1】：

我根据remydib 使用 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。

【讨论】：

【解决方案2】：

Ryan Florence，React Router 的作者，在这里解释了他是如何做到的：https://twitter.com/ryanflorence/status/808890440929771520

不过我不知道图书馆。

【讨论】：

【解决方案3】：

React-VR 不使用其他应用程序的普通历史 API。内存路由器是上面列出的选项，但我推荐条件渲染。

您可以改用 Native Modules 中的 History API 将信息加载到 URL 中。

【讨论】：