解析错误：必须将相邻的 JSX 元素包装在封闭标记中

Question

当我为我的反应应用程序构建反应路线时出现错误

解析错误：相邻的 JSX 元素必须包含在封闭标记中。

下面是我的代码

class App extends Component {
  render () {
    return (
      //Make App Running within Browser Router//
      <BrowserRouter> 
        <div className="navbar">
          <Navbar />
          <Route exact path='/' component={Home} />
          <Route path='/chat' component={Chat} />
          <Route path='/about' component={About} />
        </div>
      </BrowserRouter>

      <div className="main-container"> **==> This is when problem show**
        <Searchapp />
      </div>
    );
  }
}

export default App;

谢谢

Answer 1

您必须使用父节点封装 JSX。 你可以使用 div 元素，或者如果你不想在 DOM 中添加额外的元素，你可以使用 React Fragment <>

class App extends Component {
  render () {
    return (
      <>
      <BrowserRouter> 
        <div className="navbar">
          <Navbar />
          <Route exact path='/' component={Home} />
          <Route path='/chat' component={Chat} />
          <Route path='/about' component={About} />
        </div>
      </BrowserRouter>

      <div className="main-container"> **==> This is when problem show**
        <Searchapp />
      </div>
      </>
    );
  }
}

export default App;

Answer 2

我们不允许将多个 JSX 元素分配给单个变量，这不是有效的 JavaScript 语法。

您正在尝试将一些同级元素彼此相邻放置，但您必须有一个外部标签，但是如果添加额外的<div>标签会破坏您的样式怎么办？

因此，前面提供的答案称为React.Fragment ，它是一个 JSX 外观元素，允许您将多个元素分配给单个变量，但是当呈现到屏幕时，它不会为 DOM 生成任何可见元素。

它看起来像这样：

const ObjectDelete = () => {
  const actions = (
    <React.Fragment>
      <button className="ui button negative">Delete</button>
      <button className="ui button">Cancel</button>
    </React.Fragment>
  );

这基本上是可以缩短的长形式，如下所示：

const ObjectDelete = () => {
  const actions = (
    <>
      <button className="ui button negative">Delete</button>
      <button className="ui button">Cancel</button>
    </>
  );

或者，如果它对您更有帮助，因为您提供了一个类组件：

class ObjectDelete extends React.Component {
  renderActions() {
    return (
      <React.Fragment>
        <button className="ui button negative">Delete</button>
        <button className="ui button">Cancel</button>
      </React.Fragment>
    );
  }

请注意，此时带有<React.Fragment>的 JSX 包含在辅助函数中。