错误：<Router> 可能只有一个子元素。包含开关，之前使用此代码

Question

问题： 我在使用 React Router 时遇到了一些问题。我收到错误“A 可能只有一个子元素。”

我当前的设置是我的导航栏容器和交换机都是路由器的子级。这是以前工作的，我在另一个项目上也是这样工作的，所以我不确定我坏了什么。

我尝试过的： 我试图将它包含在所有将编译的 switch 标记（因此导航容器和所有路由都在其中），但随后我收到警告“React 无法识别 DOM 元素上的 computedMatch 道具。”并且它不会像以前工作时那样显示路线。

我试图从路由器中排除导航容器并将标签移动到路由的正上方，但我收到一条错误消息，指出“必须在内部使用链接”

有什么建议吗？谢谢！

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

您是否尝试过用React.Fragment 包装Container 和Switch？

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

Answer 2

尝试在 switch 内部交换你的路线（将主线移到顶部）并将 exact 道具添加到你的主线。

<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