How to use react React Router with React VR?

Question

I'm trying to figure out how to plug React Router with React VR.

First, should I use react-router dom / native? it's not clear since React VR builds on top of React Native, but runs in the browser.

This is the code I'm having issues with.

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

The above code returns the following errors when opening the browser on /vr/:

Devisal

Answer 1

I come with this solution based on Ryan Florence video mentioned by remydib using react-router 4.1.2.

In main app component:

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

...

    <MemoryRouter>
    ...
    </MemoryRouter>

In the component using 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>
        );
    }
}

There is react-router-vr package in npm, but it looks like placeholder only. Sadly at the moment there is no support for browser URL.

Horan

Answer 2

Ryan Florence, the author of React Router, explains how he does it here: https://twitter.com/ryanflorence/status/808890440929771520

I don't know of a library though.

Fearfully

Answer 3

React-VR does not use the normal history APIs of other applications. Memory Router is the option listed above, but I recommend conditional rendering.

You can use the History API from Native Modules instead to load information into the URL.

Farewell