反应路由器在浏览器中显示组件两次

Question

我对 ReactJS Hooks 中的以下代码有点困惑，所以基本上当我单击 Home(http://localhost:3000/( 时，它会显示两次(主页组件(。 我不明白它发生的原因。

我已经在 Nav 组件中以及在 App.js 的路由器下定义了家庭和篮子组件，但只有篮子正确显示，即只有一次。 请提出任何建议

以下代码片段来自应用程序.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>)

导航.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>

来自主页.js文件的代码片段

function Home() {
return <div> <a href="/">
<img src={ProjectLogo} />
Welcome
</a></div>
}

Answer 1

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

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

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