Javascript 错误为：A<；路由器>；可能只有一个子元素_Javascript_Reactjs

Javascript 错误为：A<；路由器>；可能只有一个子元素

javascript reactjs

Javascript 错误为：A<；路由器>；可能只有一个子元素,javascript,reactjs,Javascript,Reactjs,我在React.js中遇到问题，当我保存代码时，网站页面会显示：一个元素只能有一个子元素问题是什么？我如何解决 import React, { Component } from 'react'; import Head from './component/head'; import Contacts from './component/contacts'; import { BrowserRouter as Router, Route, Switch } from 'react-router

我在React.js中遇到问题，当我保存代码时，网站页面会显示：

一个元素只能有一个子元素

问题是什么？我如何解决

import React, { Component } from 'react';
import Head from './component/head';
import Contacts from './component/contacts';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Addcontacts from './component/Addcontacts';

import { Provider } from "./context";

import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
    render() {
        return (
            <Provider>
                <Router>
                    <Head promo = 'alow' />
                    <div className='container'>
                        <Switch>
                            <Route exact path='/' Component={Contacts} />
                            <Route exact path='/add' Component={Addcontacts} />
                        </Switch>
                    </div>
                </Router>
            </Provider>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“./组件/头”导入头；
从“./组件/联系人”导入联系人；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
从“./component/Addcontacts”导入Addcontacts；
从“/context”导入{Provider}；
导入'bootstrap/dist/css/bootstrap.min.css'；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

您可以使用React.Fragment来修复此问题

     <Router>
        <>
          <Head promo = 'alow' />
          <div className='container'>
            <Switch>
              <Route exact path='/' Component={Contacts} />
              <Route exact path='/add' Component={Addcontacts} />
            </Switch>
          </div>
       </>
     </Router>

因此，基本上，您只需要在您小时候的组件中有一个标记。

在您的

中，将所有内容像这样包装在一个

中


//你所有的内容

路由器期望

此.props.children

为null或长度等于1

在你的情况下，它不止一个

所以，如果你包装所有属性。在单个标签内，它应该可以正常工作

你可以用其中任何一种

<> => React.Fragment
<div> => DIV

=>React.Fragment
=>DIV

例如：

class App extends Component {
      render() {
        return (
          <Provider>
            <Router>
                <div>
                  <Head promo = 'alow' />
                  <div className='container'>
                    <Switch>
                      <Route exact path='/' Component={Contacts} />
                      <Route exact path='/add' Component={Addcontacts} />
                    </Switch>
                  </div>
                </div>
            </Router>
          </Provider>
        );
      }
    }

类应用程序扩展组件{
render（）{
返回(
);
}
}