Javascript React路由器深度嵌套交换机路由更改会一直重新渲染到根应用程序

我正在我的应用程序中使用react router dom 4+版本和redux

我的路线结构如下：

index.js

：

<BrowserRouter>
  <App />
</BrowserRouter>

<div className="app">
  <Switch>
    <Redirect exact from="/" to={redirect} />
    <Route path="/auth" component={Auth} />
    <Route path="/dashboard" component={RequireAuth(Main)} />
    <Route component={NotFound} />
  </Switch>
</div>

<div className="main-page">
  <Header url={url} />
  <div className="main-container" style={!!this.props.menuOpen ? { marginLeft: '240px' } : { marginLeft: '0px' }}>
    <Switch>
      <Redirect exact path={url} to={`${url}/tasks`} />
      <Route path={`${url}/tasks`} render={() => <h1>TASKS</h1>} />
      <Route path={`${url}/done`} render={() => <h1>DONE</h1>} />
      <Route path={`${url}/notes`} render={() => <h1>NOTES</h1>} />
      <Route path={`${url}/archive`} render={() => <h1>ARCHIVE</h1>} />
      <Route component={AltNotFound} />
    </Switch>
  </div>
</div>

RequireAuth

是一个HOC，它只检查用户是否被授权并返回“Main”

Main.js

：

<BrowserRouter>
  <App />
</BrowserRouter>

<div className="app">
  <Switch>
    <Redirect exact from="/" to={redirect} />
    <Route path="/auth" component={Auth} />
    <Route path="/dashboard" component={RequireAuth(Main)} />
    <Route component={NotFound} />
  </Switch>
</div>

<div className="main-page">
  <Header url={url} />
  <div className="main-container" style={!!this.props.menuOpen ? { marginLeft: '240px' } : { marginLeft: '0px' }}>
    <Switch>
      <Redirect exact path={url} to={`${url}/tasks`} />
      <Route path={`${url}/tasks`} render={() => <h1>TASKS</h1>} />
      <Route path={`${url}/done`} render={() => <h1>DONE</h1>} />
      <Route path={`${url}/notes`} render={() => <h1>NOTES</h1>} />
      <Route path={`${url}/archive`} render={() => <h1>ARCHIVE</h1>} />
      <Route component={AltNotFound} />
    </Switch>
  </div>
</div>

任务}/>
完成}/>
注释}/>
存档}/>

另外，

Auth.js

的结构与

Main.js

类似，它有一个排序头和一个带有2条路由的交换机

现在我的问题是：

每当我导航嵌套路径时，如从仪表板/任务到仪表板/注释等（与Auth.js中相同），所有应用程序都会重新渲染到

app.js

。我在

Main.js

和

App.js

componentWillMount

、

componentDidMount

和render方法中添加了控制台日志，它们每次都会触发。当然这不是应该发生的，对吗

我做错了什么？我可以在这里提供哪些其他信息来帮助人们回答问题？对不起，这是我的第一个问题