为什么在history.push上将history.length设置为50而不渲染组件？

如何解决为什么在history.push上将history.length设置为50而不渲染组件？

我有两个React模块。 父模块包含app.js和仪表板组件。 通用模块包含常见的组件，如页眉和页脚。

我已经以一般方式设置了反应路由器。

我面临的问题是，单击标题中可用的链接后，他的相应组件将无法加载。

我怀疑这种情况正在发生，因为即使在应用程序中单击单个链接，history.length仍设置为50（仅应增加1​​）。 （我在某些论坛上看到将其设置为最大50）

任何建议为什么会发生这种行为以及如何处理该问题并在标题中提供可用的链接上的相应组件。

相同的代码 App.js（在Parenet模块中可用）

function App() {
  const history = createbrowserHistory();
  const goto = (url) => {
    history.push(url)
  }
  const routes = () => {
    return (
      <Router history={history}>
        <Header goto={goto}/>
        <Route exact path="/" component={Dashboard} />
        <Route exact path="/componentA" component={componentA}></Route>
        <Route exact path="/componentB" component={componentB}></Route>
        />
      </Router>
    );
  };
  return (
    <MuiThemeProvider theme={createMuiTheme(themeDefault)}>
      <div className="App">
        <div className="content">{routes()}</div>
        <Footer />
      </div>
    </MuiThemeProvider>
  );
}

export default App;

Header.js（可在Common React模块中与另一个模块分开并作为节点模块导入）

const Header = (props) => {
  const {  goto } = props;

  const gotoURL = (url) => {
    goto(url)
  };
  return (
    <div>
      {options &&
        options.map((option) => (
          <div
            key={option.url}
            onClick={() => gotoURL(option.url)}
          >
            {option.name}
          </div>
        ))}
    </div>
  );
};


export default Header;