React-Router只有一个孩子

Question

我一直在收到错误:

"路由器"可能只有一个子元素

当使用react-router时.

我似乎无法弄清楚为什么这不起作用,因为它与他们在示例中显示的代码完全相同: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'));

应该

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

jsfiddle/webpackbin

Answer 2

这是API的变化react-router 4.x.建议的方法是将Routes 包装在Switch:https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

引用:

兑换

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

至

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

当然,您需要添加Switch到您的导入:

import { Switch, Router, Route } from 'react-router'