React-Router 在浏览器中显示组件两次

Question

我对 ReactJS Hooks 中的以下代码有点困惑，所以基本上当我点击 Home(http://localhost:3000/) 时，它会显示两次（主组件）。我无法理解它发生的原因。

我已经在 Nav 组件以及 App.js 中的 Router 下定义了 Home 和 basket 组件，但只有篮子正确显示，即仅显示一次。请有任何建议

以下来自 App.js 文件的片段

return (

    <Router>

      <div className="App">

        <header className="header">

        <Nav userinfo={userData} userstatus={siginalready} />

        

          <Sidebar />

          <Switch>

          <Route

              path="/"

              exact

              render={(props) => (

                <Home

                  {...props}

                  userData={userData}

                  userstatus={siginalready}

                />

              )}

            />

           

            <Route

              path="/basket"

              exact

              render={(props) => (

                <Basket

                  {...props}

                  userData={userData}

                  userstatus={siginalready}

                />

              )}

            />

</Switch>

</Router>)

Nav.js 文件的片段

 return (

    <nav>

       <label className="logo">

       <Home/>

      </label>

      <ul>

        <li className="searchbar">

        <Search/>

        </li>

        <li>

          <a

            className="active glyphicon glyphicon-shopping-cart"

            href="./basket"

          ></a>

          <li>

来自 Home.js 文件的片段

function Home() {

  return <div> <a href="/">

  <img src={ProjectLogo} />

  Welcome

</a></div>

}

Answer 1

您在<Home/>组件中添加了Nav组件。当您删除它时，您将只渲染一次。当遇到这类问题时，检查元素开发工具很有帮助。