Ошибка: <Router>может иметь только один дочерний элемент. Содержит переключатель, работавший ранее с этим кодом

Question

Проблема: у меня возникли проблемы с React Router. Я получаю сообщение об ошибке «A может иметь только один дочерний элемент».

Моя текущая настройка такова, что мой контейнер Navbar и коммутатор являются дочерними элементами маршрутизатора. Это работало раньше, и у меня это работает так же в другом проекте, поэтому я не уверен, что я сломал.

То, что я пытался: я пытался обернуть все это тег переключения (так что навигация контейнер и все маршруты находятся там), который скомпилируется, но затем я получаю предупреждение «React не распознает computedMatch prop для элемента DOM». и он не отображает маршруты, как это было раньше, когда он работал.

Я попытался исключить контейнер nav из маршрутизатора и переместить тег прямо над маршрутами, но я получаю сообщение об ошибке, что гласит "Ссылка должна быть использована внутри"

Любой совет? спасибо!

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBookOpen, faTags, faHistory, faShoppingBag, faUserCircle } from '@fortawesome/free-solid-svg-icons'
import { Container, Row, Col } from "shards-react";
import Main from "../pages/Main/Main.js"
import Deals from "../pages/Deals/Deals.js"
import Menu from "../pages/Menu/Menu.js"
import Cart from "../pages/Cart/Cart.js"
import Previous from "../pages/Previous/Previous.js"
import Profile from "../pages/Profile/Profile.js"

import "../Nav/Navbar.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


export default class NavContainer extends React.Component {
  render() {
    return (
      <Router>

      <Container className="nav-menu-container">


        <Row>
          <Col>
            <Link to="/deals">
              <FontAwesomeIcon icon={faTags}/>
              <h6>Deals</h6>
           </Link>
          </Col>
           <Col>
             <Link to="/menu">
               <FontAwesomeIcon icon={faBookOpen}/>
               <h6>Menu</h6>
             </Link>
           </Col>
           <Col>
             <Link to="/cart">
               <FontAwesomeIcon icon={faShoppingBag}/>
               <h6>Cart</h6>
             </Link>
           </Col>
           <Col>
             <Link to="/previous">
               <FontAwesomeIcon icon={faHistory}/>
               <h6>Previous</h6>
            </Link>
          </Col>
          <Col>
             <Link to="/profile">
               <FontAwesomeIcon icon={faUserCircle}/>
               <h6>Profile</h6>
             </Link>
          </Col>
        </Row>
   </Container>

   <Switch>


          <Route path="/deals">
            <Deals />
          </Route>
          <Route path="/menu">
            <Menu />
          </Route>
          <Route path="/cart">
            <Cart />
          </Route>
          <Route path="/previous">
            <Previous />
          </Route>
          <Route path="/profile">
            <Profile />
          </Route>
          <Route path="/">
            <Main />
          </Route>




        </Switch>
      </Router>
    );
  }
}

Answer 1

Попробуйте поменять местами ваши маршруты (переместить основной сверху) внутри коммутатора и добавьте точный реквизит к основному.

<Switch>
 <Route exact path="/">
   <Main />
 </Route>

 ... other routes here

</Switch

Также для более чистого взгляда. Вы можете изменить свой маршрут на это:

С:

<Route path="/deals">
  <Deals />
</Route>

Кому:

<Route path="/deals" component={Deals} />

ЧИТАЙТЕ БОЛЬШЕ ЗДЕСЬ: https://reacttraining.com/react-router/web/api/Route

Answer 2

Вы пробовали обернуть Container и Switch React.Fragment?

<Router>
  <React.Fragment>
    <Container>
      ...
    </Container>
    <Switch>
      ...
    </Switch>
  </React.Fragment>
</Router>