[英]Error is: A <Router> may have only one child element
I have problem in React.js when I save the code the website page say:当我保存网站页面的代码时,我在 React.js 中遇到了问题:
A <Router> may have only one child element一个 <Router> 可能只有一个子元素
What is the problem and how can I solve it?有什么问题,我该如何解决?
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;
you can use React.Fragment https://reactjs.org/docs/fragments.html#short-syntax to fix this issue.你可以使用 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>
So basically you just need to have a single tag in you compenent as a child.所以基本上你只需要在你小时候就拥有一个标签。
Inside your <Router>
wrap everything in a single <div>
like this在您的<Router>
将所有内容都包装在一个<div>
如下所示
<Router> <div> // all your content </div> </Router>
Router expect this.props.children
to be null or to have length equal to 1路由器期望this.props.children
为空或长度等于1
In your case its more than 1在你的情况下它超过 1
So if you wrap all attr.所以如果你把所有的 attr. inside a single tag it should work fine在单个标签内它应该可以正常工作
You can use any of these您可以使用其中任何一个
<> => React.Fragment
<div> => DIV
Eg:例如:
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.