Reactjs 反应路由器嵌套重新加载页面

我正在尝试使用React Router在React中设置嵌套路由，以便直接加载嵌套组件，但当我尝试转到嵌套路由时，页面将重新加载

即使是官方示例也会这样做——当在新窗口中打开时，官方示例也会按照预期工作

我注意到的一件事是，如果我实际上从一个子路由组件中更改路由，则页面不会重新加载。但这是一种糟糕的做法，我想在定义路由的组件中更改路由

最近有什么变化吗？如何在不重新加载页面的情况下实现嵌套路由更改

家长

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

// At route /home
const Parent = (props: RouteComponentProps<any>) => {
  const changeRoute = () => {
    props.history.push('/home/test'); // Reloads page
  };

  return (
    <Router>
      <Switch>
        <Route component={Test} path="/home/test" />
        <Route component={Default} />
      </Switch>
      <button onClick={changeRoute}>Click</button>
    </Router>
  );
};

export default withRouter(Parent);

从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
//在途中/家中
常量父项=（道具：RouteComponentProps）=>{
常量changeRoute=（）=>{
props.history.push（'/home/test'）；//重新加载页面
};
返回(
点击
);
};
使用路由器导出默认值（父级）；

儿童

const Default = (props: RouteComponentProps<any>) => {
  const changeRoute = () => {
    props.history.push('/home/test'); // Does not reload page
  };

  return (
    <button onClick={changeRoute}>Click</button>
  );
};

export default withRouter(Default);

const Default=（props:RouteComponentProps）=>{
常量changeRoute=（）=>{
props.history.push（'/home/test'）；//不重新加载页面
};
返回(
点击
);
};
使用路由器导出默认值（默认值）；

我使用的是react路由器dom v5.1.2

 import {HashRouter as Router} from "react-router-dom";

---

将BrowserRouter更改为HashRouter并检查，它会停止重新加载问题。问题是我在父级中使用了

，即使父级本身在

标记中。将父级中的

替换为

解决了此问题。

是否尝试将路由定义为相对路由<代码>。我不确定它是否会工作，但可能值得一试。@SagiRika建议不错，但运气不好。将

组件

切换到

渲染

怎么样<代码>