React-Router tylko jedno dziecko

Question

trzymam na uzyskiwanie błąd:

A 'Router' may have only one child element

podczas korzystania reagować-router.

ja nie potrafię zrozumieć, dlaczego to nie działa, ponieważ jest to dokładnie tak samo jak kod wykazują one w ich przykład: https://reacttraining.com/react-router/web/guides/quick-start

Oto mój kod:

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

Dzięki za pomoc

Answer 1

Musisz owinąć swoje Route w <div> (lub <Switch>).

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

powinny być

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

jsfiddle/webpackbin

Answer 2

Jest to zmiana API w react-router4.x. Zalecane podejście jest owinąć Route s w Switch: https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

Cytując:

Konwersja

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

do

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

Answer 3

Ten problem występuje, gdy nie masz tag nadrzędny przed <Route> wewnątrz <Router>, aby rozwiązać ten problem, zachowaj numer <Route> zamknięty w znaczniku macierzystej tak jak <div>, <p> itp przykład -

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