javascript - 解析错误: Adjacent JSX elements must be wrapped in an enclosing tag

Question

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

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.

下面是我的代码

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

您必须使用父 Node 封装 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;