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/
:
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.