Question

我对ReactJS Hooks中的以下代码有些困惑，所以基本上，当我单击Home（http：// localhost：3000 /）时，它显示两次（home组件）。我不明白它发生的原因。

我已经在Nav组件以及App.js的Router下定义了Home和basket组件，但是只有正确显示了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组件。

将其删除时，将只渲染一次。

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

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

1 个答案: