React-Router 只有一个孩子 [英] React-Router only one child
本文介绍了React-Router 只有一个孩子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不断收到错误消息:
<块引用>一个路由器"可能只有一个子元素
使用 react-router 时.
我似乎无法弄清楚为什么这不起作用,因为它与他们在示例中显示的代码完全一样:快速入门
这是我的代码:
从'react'导入React;从 './Editorstore' 导入 Editorstore;从'./components/editor/App'导入应用程序;从 './components/baselayer' 导入 BaseLayer;从react-router-dom"导入{BrowserRouter 作为路由器,路由};从'react-dom'导入{render};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 = '样式表';a.href = 链接;document.body.appendChild(a);返回空;});使成为((<路由器><路由精确路径="/";组件={BaseLayer}/><路由路径="/editor";组件={App} store={store}/></路由器>), document.querySelector('#app'));
解决方案
您必须将 Route
包裹在
(或
).render((<路由器><路由精确路径="/" component={BaseLayer}/><Route path="/editor" component={App} store={store}/></路由器>), document.querySelector('#app'));
应该是
render((<路由器><div><路由精确路径="/" component={BaseLayer}/><Route path="/editor" component={App} store={store}/>
</路由器>), document.querySelector('#app'));
I keep on getting the error:
A 'Router' may have only one child element
when using react-router.
I can't seem to figure out why this is not working, since it's exactly like the code they show in their example: Quick Start
Here is my code:
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'));
解决方案
You have to wrap your Route
's in a <div>
(or a <Switch>
).
render((
<Router>
<Route exact path="/" component={BaseLayer} />
<Route path="/editor" component={App} store={store} />
</Router>
), document.querySelector('#app'));
should be
render((
<Router>
<div>
<Route exact path="/" component={BaseLayer} />
<Route path="/editor" component={App} store={store} />
</div>
</Router>
), document.querySelector('#app'));
这篇关于React-Router 只有一个孩子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文