2017-05-12 8 views
8

私はReact VRをReact Routerに接続する方法を理解しようとしています。リアクションリアクターとリアクションVRの使い方は?

最初に、私はreact-routerdom/nativeを使用する必要がありますか? React VRはReact Nativeの上に構築されていますが、ブラウザで実行されるため、明確ではありません。

これは私が問題を抱えているコードです。 /vr/上でブラウザを開いたとき

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 Router + React VR errors

答えて

1

リアルータ4.1.2を使用してremydibに記載されているRyan Florenceのビデオに基づいてこのソリューションが提供されています。

は、メインアプリのコンポーネントで:VrButtonを使用してコンポーネントに

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

... 

    <MemoryRouter> 
    ... 
    </MemoryRouter> 

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はサポートされていません。

-1

React-VRは他のアプリケーションの通常の履歴APIを使用しません。メモリルータは上記のオプションですが、私は条件付きレンダリングを推奨します。

URLに情報をロードする代わりに、ネイティブモジュールのHistory APIを使用できます。

関連する問題