リアクト-ルータ、私はエラーを取得し続ける唯一の子

Question

を：

A 'Router' may have only one child element

が反応し、ルータを使用した場合。

私はそれはまさに彼らの例に示したコードのようなものですので、これは、動作しない理由を把握するように見えることはできません。ここでhttps://reacttraining.com/react-router/web/guides/quick-start

は私のコードは次のとおりです。助けるため

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

感謝

Answer 1

Routeを<div>（または<Switch>）にラップする必要があります。

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

これはreact-router4.xでのAPIの変更である

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

jsfiddle/webpackbin

Answer 2

でなければなりません。推奨されるアプローチはSwitchでRoute Sをラップすることです：引用https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

：

変換

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

あなたが前に親タグを持っていないとき

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

Answer 3

に、この問題が発生します<Route> inside <Router>この問題を解決するには、<Route>親タグで囲まれたような<div>、<p>等 例 -

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