प्रतिक्रिया-रूटर केवल एक ही बच्चा

Question

मैं त्रुटि हो रही है पर रखें:

A 'Router' may have only one child element

जब प्रतिक्रिया रूटर का उपयोग कर।

मैं क्यों इस काम नहीं कर रहा यह पता लगाने की है, क्योंकि यह वास्तव में कोड वे अपने उदाहरण में दिखाने की तरह है प्रतीत नहीं कर सकते हैं:

import React from 'react'; 
import Editorstore from './Editorstore'; 
import App from './components/editor/App'; 
import BaseLayer from './components/baselayer'; 
import {BrowserRouter as Router, Route} from 'react-router-dom'; 
import {render} from 'react-dom'; 

const root = document.createElement('div'); 
root.id = 'app'; 
document.body.appendChild(root); 

const store = new Editorstore(); 
const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css']; 

stylelist.map((link) => { 
    const a = document.createElement('link'); 
    a.rel = 'stylesheet'; 
    a.href = link; 
    document.body.appendChild(a); 
    return null; 
}); 

render((
    <Router> 
    <Route exact path="/" component={BaseLayer} /> 
    <Route path="/editor" component={App} store={store} /> 
    </Router> 
), document.querySelector('#app')); 

मदद के लिए धन्यवाद: https://reacttraining.com/react-router/web/guides/quick-start

यहाँ मेरी कोड है

Answer 1

आपको अपने Route को <div> (या <Switch>) में लपेटना होगा।

render((
    <Router> 
    <Route exact path="/" component={BaseLayer} /> 
    <Route path="/editor" component={App} store={store} /> 
    </Router> 
), document.querySelector('#app')); 

render((
    <Router> 
    <div> 
     <Route exact path="/" component={BaseLayer} /> 
     <Route path="/editor" component={App} store={store} /> 
    </div> 
    </Router> 
), document.querySelector('#app')); 

jsfiddle/webpackbin

Answer 2

होना चाहिए यह react-router4.x में एक API परिवर्तन है। का हवाला देते हुए https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

:

इससे पहले कि आप पैरेंट टैग की जरूरत नहीं है जब

<Router> 
    <Route ...> 
    <Route ...> 
</Router> 

को

<Router> 
    <Switch> 
    <Route ...> 
    <Route ...> 
    </Switch> 
</Router> 

Answer 3

यह समस्या तब होती है कन्वर्ट सुझाया गया तरीका एक Switch में Route रों रैप करने के लिए है <Route><Router> के अंदर इस समस्या को हल करने के लिएरखेंएक पैरेंट टैग में संलग्न जैसे <div>, <p> आदि उदाहरण -

<Router> 
    <p> 
     <Route path="/login" component={Login} /> 
     <Route path="/register" component={Register} /> 
    </p> 
</Router>