Не удалось скомпилировать - ошибка синтаксического анализа dom маршрутизатора

Question

Не уверен, почему я получаю эту ошибку с реакцией маршрутизатора DOM. Я пытаюсь создать реагирующие маршруты, однако получаю ошибку Failed to compile, как показано ниже.

/src/App.js
  Line 31:5:  Parsing error: Expected corresponding JSX closing tag for <Route>

  29 |     <Cart/>
  30 |     <Default/>
> 31 |     </Switch>
     |     ^
  32 | 
  33 |    </React.Fragment>
  34 | 

App. js file

import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import Navbar from './components/Navbar'
import Product from './components/Product'
import ProductList from './components/ProductList'
import Details from './components/Details'
import Cart from './components/Cart'
import Default from './components/Default'




function App() {
  return (
   <React.Fragment>
     <h3>Hello from app</h3>

    <Navbar/>

    <Switch>
      <Route path="/" component={ProductList}>
      <Route path="/Details" component={Details}>

    <ProductList/>
    <Details/>
    <Cart/>
    <Default/>
    </Switch>

   </React.Fragment>

  );
}

Я использовал Маршрутизатор в указателе. файл для хранения кода.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <Router>

  <React.StrictMode>

    <App />
  </React.StrictMode>
  </Router>

  ,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Answer 1

Мне кажется, что вы забыли закрыть <Route>. Можете ли вы попробовать закрыть компоненты Route , как это?

  <Route path="/" component={ProductList} />