Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 972
Guy Avatar asked May 12 '17 06:05

Guy


People also ask

What can I use instead of withRouter in react?

You can import the useNavigate hook and issue a relative navigation from the current location. Example: import React from "react"; import './menuItem. style.

How do I add react router to react app?

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 .

Can I use react router in React Native?

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.

Why we use withRouter in react?

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.


1 Answers

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.

like image 112
Arek Avatar answered Oct 11 '22 20:10

Arek