错误是：一个 <Router> 可能只有一个子元素答案

【问题标题】：Error is: A <Router> may have only one child element错误是：一个 <Router> 可能只有一个子元素
【发布时间】：2019-03-26 17:25:37
【问题描述】：

当我保存网站页面显示的代码时，我在 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;

【问题讨论】：

React-Router only one child的可能重复

标签： javascript reactjs

【解决方案1】：

你可以使用 React.Fragment https://reactjs.org/docs/fragments.html#short-syntax 来解决这个问题。

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

所以基本上你只需要在你还是个孩子的时候有一个标签。

【讨论】：

【解决方案2】：

在您的<Router> 中，像这样将所有内容都包装在一个<div> 中

<Router>
  <div>
  // all your content
  </div>
 </Router>

【讨论】：

【解决方案3】：

路由器期望 this.props.children 为 null 或长度等于 1

在你的情况下它超过 1 个

所以如果你把所有的 attr.在单个标签内它应该可以正常工作

你可以使用任何这些

<> => React.Fragment
<div> => 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>
        );
      }
    }

【讨论】：