React router 如何将react路由器与react VR一起使用?

React router 如何将react路由器与react VR一起使用?,react-router,react-360,React Router,React 360,我想知道如何将React路由器插入React VR 首先,我应该使用react路由器dom/native?目前还不清楚,因为React VR构建在React Native之上,但在浏览器中运行 这是我遇到问题的代码 import React from 'react'; import { AppRegistry } from 'react-vr'; import { BrowserRouter as Router, Route } from 'react-router-dom' im

我想知道如何将React路由器插入React VR

首先,我应该使用
react路由器
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);
从“React”导入React;
从'react vr'导入{AppRegistry};
进口{
BrowserRouter作为路由器,
路线
}从“反应路由器dom”
从“./组件/平台”导入平台;
从“./components/Video”导入视频;
导出默认类WelcomeToVR扩展React.Component{
render(){
返回(
);
}
};
AppRegistry.registerComponent('WelcomeToVR',()=>WelcomeToVR);
/vr/
上打开浏览器时,上述代码返回以下错误:
React Router的作者Ryan Florence在这里解释了他是如何做到这一点的:


不过我不知道有哪一个库。

我根据react router 4.1.2中提到的Ryan Florence视频提供了这个解决方案

在主应用程序组件中:

import { MemoryRouter, Redirect, Route, Switch } from 'react-router';

...

    <MemoryRouter>
    ...
    </MemoryRouter>
从'react router'导入{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>
        );
    }
}
导出类NavBtn扩展React.Component{
静态上下文类型={
路由器:React.PropTypes.object.isRequired,
};
render(){
const{to}=this.props;
constonclick=()=>this.context.router.history.push(to);
返回(
...
);
}
}

npm中有一个包,但它看起来只是占位符。遗憾的是,目前还不支持浏览器URL。

React VR不使用其他应用程序的常规历史API。内存路由器是上面列出的选项,但我建议使用条件渲染

您可以使用本机模块中的历史API将信息加载到URL中