react-routerreact-360

How to use react React Router with React VR?


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


Solution

  • 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.