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/
:
You can import the useNavigate hook and issue a relative navigation from the current location. Example: import React from "react"; import './menuItem. style.
To install React Router, all you have to do is run npm install react-router-dom@6 in your project terminal and then wait for the installation to complete. If you are using yarn then use this command: yarn add react-router-dom@6 .
React Router Native is published to npm. You can install it with either npm or yarn . Once you've initialized a new React Native project, you can copy/paste any of the examples into your index.
You can get access to the history object's properties and the closest <Route> 's match via the withRouter higher-order component. withRouter will pass updated match , location , and history props to the wrapped component whenever it renders.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With