reactjs - 反应路由器渲染组件两次

Question

我有孩子和第一次加载，一切正常，但是一旦我盯着站点，组件开始渲染两次。我不确定我做错了什么。这是路由顶部结构：

<React.Suspense fallback={<span>Loading...</span>}>
    <Switch>
       <Route path={"/dashboard/optionOne"} component={OptionOne} />
       <Route path={"/dashboard/OptionTwo"} component={OptionTwo}/>
    <Switch>
</React.Suspense>

然后这些是子路由： OptionOne Component

    <Switch>
       <Route exact path={path} component={OptionOneContainer}/>
       <Route path={`${path}/subChildOne`} component={SubChildOne}/>
       <Route path={`${path}/:subChildTwo`} component={SubChildTwo}/>
    </Switch>

OptionTwo 组件

    <Switch>
       <Route exact path={path} component={OptionTwoContainer}/>
       <Route path={`${path}/OptionTwoSubChildOne`} component={OptionTwoSubChildOne}/>
       <Route path={`${path}/:OptionTwoSubChildTwo`} component={OptionTwoSubChildTwo}/>
    </Switch>

我有一个顶部组件标题，可帮助浏览站点仪表板：

const navigate=(path)=>{
  history.push(path)
}

<div>
  <Link to={"/dashboard/optionOne"}>OptionOne</Link>
  <div onClick={()=>navigate("/dashboard/optionOne")}>OptionOne</div>
  <div onClick={()=>navigate("/dashboard/optionTwo")}>OptionTwo</div>
</div>

一旦单击链接进行导航，甚至使用 history.push，组件就会渲染两次。有什么建议么？

标签： reactjsreact-routerreact-router-domreact-router-v4