React Router를 React VR과 함께 사용하는 방법은 무엇입니까?

Question

React VR을 React Router에 연결하는 방법을 알아 내려고합니다.

먼저 react-routerdom/을 사용해야합니까? React VR은 React Native 위에 구축되었지만 브라우저에서 실행되기 때문에 명확하지 않습니다.

이것은 문제가있는 코드입니다.

Answer 1

나는 반응 라우터 4.1.2를 사용하여 remydib에 의해 언급 된 Ryan Florence 비디오를 기반으로이 솔루션을 제공합니다. 주요 응용 프로그램 구성 요소에서

:

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

... 

    <MemoryRouter> 
    ... 
    </MemoryRouter> 

VrButton를 사용하여 구성 요소에서 :이 NPM에 react-router-vr 패키지는하지만, 그것은 단지 자리처럼 보이는

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> 
     ); 
    } 
} 

. 슬프게도 현재 브라우저 URL을 지원하지 않습니다.

Answer 2

라이언 피렌체, 라우터 반응의 저자, ​​그는 여기 않는 방법에 대해 설명합니다 : https://twitter.com/ryanflorence/status/808890440929771520

내가 돈을 /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); 

위의 코드는 다음과 같은 오류를 반환 도서관을 알지 못한다.

Answer 3

React-VR은 다른 응용 프로그램의 일반 기록 API를 사용하지 않습니다. 메모리 라우터는 위에 나열된 옵션이지만 조건부 렌더링을 권장합니다.

네이티브 모듈의 History API를 대신 URL에 정보를로드 할 수 있습니다.