प्रतिक्रिया वीआर के साथ प्रतिक्रिया प्रतिक्रिया राउटर का उपयोग कैसे करें?

Question

मैं प्रतिक्रिया वीआर के साथ प्रतिक्रिया राउटर को प्लग करने का तरीका जानने का प्रयास कर रहा हूं।

सबसे पहले, क्या मुझे react-routerdom/native का उपयोग करना चाहिए? यह स्पष्ट नहीं है क्योंकि प्रतिक्रिया वीआर प्रतिक्रिया मूल के शीर्ष पर बनाता है, लेकिन ब्राउज़र में चलता है।

यह वह कोड है जिसमें मुझे समस्या है।

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

ऊपर कोड लौटाता है निम्न त्रुटियों जब /vr/ पर ब्राउज़र खोलने:

Answer 1

मैं प्रतिक्रिया समाधान राउटर 4.1.2 का उपयोग करके remydib द्वारा वर्णित रयान फ्लोरेंस वीडियो के आधार पर इस समाधान के साथ आया हूं।

मुख्य अनुप्रयोग घटक में:

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

... 

    <MemoryRouter> 
    ... 
    </MemoryRouter> 

घटक 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> 
     ); 
    } 
} 

वहाँ NPM में react-router-vr पैकेज है, लेकिन यह केवल प्लेसहोल्डर तरह दिखता है। अफसोस की बात है कि इस समय ब्राउज़र यूआरएल के लिए कोई समर्थन नहीं है।

Answer 2

रयान फ्लोरेंस, रूटर प्रतिक्रिया के लेखक, बताते हैं कि कैसे वह इसे यहाँ करता है: https://twitter.com/ryanflorence/status/808890440929771520

मैं डॉन हालांकि पुस्तकालय के बारे में पता नहीं है।

Answer 3

प्रतिक्रिया-वीआर अन्य अनुप्रयोगों के सामान्य इतिहास API का उपयोग नहीं करता है। मेमोरी राउटर ऊपर सूचीबद्ध विकल्प है, लेकिन मैं सशर्त प्रतिपादन की अनुशंसा करता हूं।

आप URL में जानकारी लोड करने के बजाय मूल मॉड्यूल से इतिहास API का उपयोग कर सकते हैं।