在 reactjs 中编译期间出现相邻的 JSX 错误

Question

return (

  <Router>
    <div className="banner" >
  <div >
    <ul>
       <li><Link className="a" to={'/'}>•Home</Link></li>
       <li><Link className="a" to={'/about'}>•About</Link></li>     
       <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
       <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
       <li><Link className="a"to={'/services'}>•Services</Link></li>
       <li><Link className="a"to={'/contact'}>•Contact</Link></li>
     </ul>
    </div>
      <hr/>

      <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/LoginForm" component={LoginForm}/>
      <Route path="/gallery" component={Gallery}/>
      <Route path="/services" component={Services}/>
      <Route path="/contact" component={Contact}/>
      </Switch>
    </div>

  </Router>

  <div className="w3-content w3-display-container">
  <img className="mySlides" src={image1.jpg} style="width:100%">
  <img className="mySlides" src={image2.jpg} style="width:100%">
  <img className="mySlides" src={image3.jpg} style="width:100%">
  <img className="mySlides" src={image4.jpg} style="width:100%">
  <img className="mySlides" src={image5.jpg} style="width:100%">
  <img className="mySlides" src={image6.jpg} style="width:100%">
  </div>


    );

这是我的代码..但是语法错误：E:/Projects/react-redux-login/src/components/HomePage/HomePage.js: 相邻的 JSX 元素必须包含在封闭标记中 (42:6)错误发生.. 我需要做什么改变？路由器标记关闭和 div..

之间发生错误

Answer 1

您需要将代码包装到单个父容器中。您可以按以下方式进行操作：

return (
 <div>
  <Router>
   <div className="banner" >
    <div >
     <ul>
      <li><Link className="a" to={'/'}>•Home</Link></li>
      <li><Link className="a" to={'/about'}>•About</Link></li>     
      <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
      <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
      <li><Link className="a"to={'/services'}>•Services</Link></li>
      <li><Link className="a"to={'/contact'}>•Contact</Link></li>
     </ul>
    </div>
    <hr/>

    <Switch>
     <Route exact path="/" component={Home} />
     <Route path="/about" component={About} />
     <Route path="/LoginForm" component={LoginForm}/>
     <Route path="/gallery" component={Gallery}/>
     <Route path="/services" component={Services}/>
     <Route path="/contact" component={Contact}/>
    </Switch>
  </div>
 </Router>

 <div className="w3-content w3-display-container">
  <img className="mySlides" src={image1.jpg} style="width:100%">
  <img className="mySlides" src={image2.jpg} style="width:100%">
  <img className="mySlides" src={image3.jpg} style="width:100%">
  <img className="mySlides" src={image4.jpg} style="width:100%">
  <img className="mySlides" src={image5.jpg} style="width:100%">
  <img className="mySlides" src={image6.jpg} style="width:100%">
  </div>
 </div>
)

在 reactjs 中编译期间出现相邻的 JSX 错误

Adjacent JSX error during compiling in reactjs

reactjs

redux-form