Ошибка синтаксического анализа: смежные элементы 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>
    );
  }

Обратите внимание, что на этом этапе JSX с <React.Fragment> заключен ввспомогательная функция.