Express 如何调试警告：预期服务器HTML包含匹配的<；a>；在<；部门>；

我正在使用Semantic UI React和Next.JS，但它出现在断点

<768px

，刷新浏览器后，我的布局完全中断。我知道，因为这是一个react/next.js应用程序，他们正在处理路由问题，但我想我想知道如果一个用户碰巧这样做了会怎么样

这不会发生在我的

/login

、

/register

或

/profile

路由上

奇怪的是，我检查了

pages/

目录中的文件，没有发现任何不匹配的

我们告诉你我们的香蕉了吗？

是的，我知道你可能忽略了早期的吹嘘，认为它是非sequitur填充内容，但是
这是真的。基因剪接和组合DNA研究花费了数年时间，但我们的
香蕉真的会跳舞。

我仍然很感兴趣
网站地图
联系我们
宗教仪式
露台平面图
香蕉预购
DNA常见问题
如何访问
最喜欢的X战警
页脚页眉

页脚内有额外的空间用于调用操作，有助于重新吸引用户。

)
导出默认主页布局

奇怪的是，它没有指向我的任何页面，而是吐出关于库和框架的信息

任何帮助都将不胜感激

---

你能解决这个问题吗@Antonio？@Eazy如果你想看看我的回购

https://github.com/antonioOrtiz/hillfinder

我想我在标记中添加了

。我只是不记得什么时候了！如果你找不到，请告诉我。谢谢你的提醒，我会检查你的回购协议。

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import {
 Button,
 Container,
 Divider,
 Grid,
 Header,
 Icon,
 Image,
 List,
 Menu,
 Responsive,
 Segment,
 Sidebar,
 Visibility,
} from 'semantic-ui-react'

// Heads up!
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
// For more advanced usage please check Responsive docs under the "Usage" section.
const getWidth = () => {
 const isSSR = typeof window === 'undefined'

 return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth
}

/* eslint-disable react/no-multi-comp */
/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
 * such things.
 */
const HomepageHeading = ({ mobile }) => (
 <Container text>
  <Header
   as='h1'
   content='Imagine-a-Company'
   inverted
   style={{
    fontSize: mobile ? '2em' : '4em',
    fontWeight: 'normal',
    marginBottom: 0,
    marginTop: mobile ? '1.5em' : '3em',
   }}
  />
  <Header
   as='h2'
   content='Do whatever you want when you want to.'
   inverted
   style={{
    fontSize: mobile ? '1.5em' : '1.7em',
    fontWeight: 'normal',
    marginTop: mobile ? '0.5em' : '1.5em',
   }}
  />
  <Button primary size='huge'>
   Get Started
      <Icon name='right arrow' />
  </Button>
 </Container>
)

HomepageHeading.propTypes = {
 mobile: PropTypes.bool,
}

/* Heads up!
 * Neither Semantic UI nor Semantic UI React offer a responsive navbar, however, it can be implemented easily.
 * It can be more complicated, but you can create really flexible markup.
 */
class DesktopContainer extends Component {
 state = {}

 hideFixedMenu = () => this.setState({ fixed: false })
 showFixedMenu = () => this.setState({ fixed: true })

 render() {
  const { children } = this.props
  const { fixed } = this.state

  return (
   <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
    <Visibility
     once={false}
     onBottomPassed={this.showFixedMenu}
     onBottomPassedReverse={this.hideFixedMenu}
    >
     <Segment
      inverted
      textAlign='center'
      style={{ minHeight: 700, padding: '1em 0em' }}
      vertical
     >
      <Menu
       fixed={fixed ? 'top' : null}
       inverted={!fixed}
       pointing={!fixed}
       secondary={!fixed}
       size='large'
      >
       <Container>
        <Menu.Item as='a' active>
         Home
        </Menu.Item>
        <Menu.Item as='a'>Work</Menu.Item>
        <Menu.Item as='a'>Company</Menu.Item>
        <Menu.Item as='a'>Careers</Menu.Item>
        <Menu.Item position='right'>
         <Button as='a' inverted={!fixed}>
          Log in
        </Button>
         <Button as='a' inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>
          Sign Up
                  </Button>
        </Menu.Item>
       </Container>
      </Menu>
      <HomepageHeading />
     </Segment>
    </Visibility>

    {children}
   </Responsive>
  )
 }
}

DesktopContainer.propTypes = {
 children: PropTypes.node,
}

class MobileContainer extends Component {
 state = {}

 handleSidebarHide = () => this.setState({ sidebarOpened: false })

 handleToggle = () => this.setState({ sidebarOpened: true })

 render() {
  const { children } = this.props
  const { sidebarOpened } = this.state

  return (
   <Responsive
    as={Sidebar.Pushable}
    getWidth={getWidth}
    maxWidth={Responsive.onlyMobile.maxWidth}
   >
    <Sidebar
     as={Menu}
     animation='push'
     inverted
     onHide={this.handleSidebarHide}
     vertical
     visible={sidebarOpened}
    >
     <Menu.Item as='a' active>
      Home
     </Menu.Item>
     <Menu.Item as='a'>Work</Menu.Item>
     <Menu.Item as='a'>Company</Menu.Item>
     <Menu.Item as='a'>Careers</Menu.Item>
     <Menu.Item as='a'>Log in</Menu.Item>
     <Menu.Item as='a'>Sign Up</Menu.Item>
    </Sidebar>

    <Sidebar.Pusher dimmed={sidebarOpened}>
     <Segment
      inverted
      textAlign='center'
      style={{ minHeight: 350, padding: '1em 0em' }}
      vertical
     >
      <Container>
       <Menu inverted pointing secondary size='large'>
        <Menu.Item onClick={this.handleToggle}>
         <Icon name='sidebar' />
        </Menu.Item>
        <Menu.Item position='right'>
         <Button as='a' inverted>
          Log in
                  </Button>
         <Button as='a' inverted style={{ marginLeft: '0.5em' }}>
          Sign Up
                  </Button>
        </Menu.Item>
       </Menu>
      </Container>
      <HomepageHeading mobile />
     </Segment>

     {children}
    </Sidebar.Pusher>
   </Responsive>
  )
 }
}

MobileContainer.propTypes = {
 children: PropTypes.node,
}

const ResponsiveContainer = ({ children }) => (
 <div>
  <DesktopContainer>{children}</DesktopContainer>
  <MobileContainer>{children}</MobileContainer>
 </div>
)

ResponsiveContainer.propTypes = {
 children: PropTypes.node,
}

const HomepageLayout = () => (
 <ResponsiveContainer>
  <Segment style={{ padding: '8em 0em' }} vertical>
   <Grid container stackable verticalAlign='middle'>
    <Grid.Row>
     <Grid.Column width={8}>
      <Header as='h3' style={{ fontSize: '2em' }}>
       We Help Companies and Companions
      </Header>
      <p style={{ fontSize: '1.33em' }}>
       We can give your company superpowers to do things that they never thought possible.
       Let us delight your customers and empower your needs... through pure data analytics.
      </p>
      <Header as='h3' style={{ fontSize: '2em' }}>
       We Make Bananas That Can Dance
            </Header>
      <p style={{ fontSize: '1.33em' }}>
       Yes that's right, you thought it was the stuff of dreams, but even bananas can be
       bioengineered.
     </p>
     </Grid.Column>
     <Grid.Column floated='right' width={6}>

     </Grid.Column>
    </Grid.Row>
    <Grid.Row>
     <Grid.Column textAlign='center'>
      <Button size='huge'>Check Them Out</Button>
     </Grid.Column>
    </Grid.Row>
   </Grid>
  </Segment>
{/*
  <Segment style={{ padding: '0em' }} vertical>
   <Grid celled='internally' columns='equal' stackable>
    <Grid.Row textAlign='center'>
     <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
      <Header as='h3' style={{ fontSize: '2em' }}>
       "What a Company"
            </Header>
      <p style={{ fontSize: '1.33em' }}>That is what they all say about us</p>
     </Grid.Column>
     <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
      <Header as='h3' style={{ fontSize: '2em' }}>
       "I shouldn't have gone with their competitor."
            </Header>

     </Grid.Column>
    </Grid.Row>
   </Grid>
  </Segment> */}

  <Segment style={{ padding: '8em 0em' }} vertical>
   <Container text>
    <Header as='h3' style={{ fontSize: '2em' }}>
     Breaking The Grid, Grabs Your Attention
        </Header>
    <p style={{ fontSize: '1.33em' }}>
     Instead of focusing on content creation and hard work, we have learned how to master the
     art of doing nothing by providing massive amounts of whitespace and generic content that
     can seem massive, monolithic and worth your attention.
        </p>
    <Button as='a' size='large'>
     Read More
   </Button>
    <Divider
     as='h4'
     className='header'
     horizontal
     style={{ margin: '3em 0em', textTransform: 'uppercase' }}
    >
     <a href='#'>Case Studies</a>
    </Divider>

    <Header as='h3' style={{ fontSize: '2em' }}>
     Did We Tell You About Our Bananas?
   </Header>
    <p style={{ fontSize: '1.33em' }}>
     Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but
     it's really true. It took years of gene splicing and combinatory DNA research, but our
     bananas can really dance.
    </p>
    <Button as='a' size='large'>
     I'm Still Quite Interested
    </Button>
   </Container>
  </Segment>

  <Segment inverted vertical style={{ padding: '5em 0em' }}>
   <Container>
    <Grid divided inverted stackable>
     <Grid.Row>
      <Grid.Column width={3}>
       <Header inverted as='h4' content='About' />
       <List link inverted>
        <List.Item as='a'>Sitemap</List.Item>
        <List.Item as='a'>Contact Us</List.Item>
        <List.Item as='a'>Religious Ceremonies</List.Item>
        <List.Item as='a'>Gazebo Plans</List.Item>
       </List>
      </Grid.Column>
      <Grid.Column width={3}>
       <Header inverted as='h4' content='Services' />
       <List link inverted>
        <List.Item as='a'>Banana Pre-Order</List.Item>
        <List.Item as='a'>DNA FAQ</List.Item>
        <List.Item as='a'>How To Access</List.Item>
        <List.Item as='a'>Favorite X-Men</List.Item>
       </List>
      </Grid.Column>
      <Grid.Column width={7}>
       <Header as='h4' inverted>
        Footer Header
       </Header>
       <p>
        Extra space for a call to action inside the footer that could help re-engage users.
      </p>
      </Grid.Column>
     </Grid.Row>
    </Grid>
   </Container>
  </Segment>
 </ResponsiveContainer>
)

export default HomepageLayout