Wie verwende ich React Router mit React VR?

Question

Ich versuche herauszufinden, wie React Router mit React VR zu verbinden.

Zuerst sollte ich react-routerdom/native verwenden? Es ist nicht klar, da React VR auf React Native basiert, aber im Browser ausgeführt wird.

Dies ist der Code, mit dem ich Probleme habe.

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

Der obige Code gibt die folgenden Fehler, wenn Sie den Browser auf /vr/ Eröffnung:

Answer 1

Ich komme mit dieser Lösung basierend auf Ryan Florence Video erwähnt remydib mit react-Router 4.1.2.

In Haupt-App-Komponente:

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

... 

    <MemoryRouter> 
    ... 
    </MemoryRouter> 

In der Komponente VrButton mit:

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

Es gibt react-router-vr Paket in npm, aber es sieht nur wie Platzhalter. Leider gibt es im Moment keine Unterstützung für die Browser-URL.

Answer 2

Ryan Florenz, der Autor von Router Reaktion, erklärt, wie er es hier tut: https://twitter.com/ryanflorence/status/808890440929771520

I don kenne aber keine Bibliothek.

Answer 3

React-VR verwendet nicht die normalen Verlaufs-APIs anderer Anwendungen. Memory Router ist die oben aufgeführte Option, aber ich empfehle bedingte Rendering.

Sie können stattdessen die Protokoll-API von nativen Modulen verwenden, um Informationen in die URL zu laden.