React-Router 在瀏覽器中顯示組件兩次

Question

我對 ReactJS Hooks 中的以下代碼有點困惑，所以基本上當我點擊主頁（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

您在Nav組件中添加了<Home/>組件。

當您刪除它時，您將只渲染一次。

當遇到這類問題時，檢查元素開發工具很有幫助。