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组件。

当您删除它时，您将只渲染一次。

当遇到这类问题时，检查元素开发工具很有帮助。