React Router 嵌套重载页面答案

【问题标题】：React Router nesting reloads pageReact Router 嵌套重载页面
【发布时间】：2020-03-26 22:08:42
【问题描述】：

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

~~即使是官方示例也是如此 - https://reacttraining.com/react-router/web/example/nesting~~ 官方示例在新窗口中打开时按预期工作。

我注意到的一件事是，如果我真的从其中一个子路由组件中更改路由，页面不会重新加载。但这是不好的做法，我想更改定义路由的组件中的路由。

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

家长

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);

儿童

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);

我正在使用 react-router-dom v5.1.2。

【问题讨论】：

您是否尝试过将路线定义为相对路线？ <Route component={Test} path="test" />。我不确定它会起作用，但可能值得一试。
@SagiRika 不错的建议，但没有运气。
将component 切换为render 怎么样？ <Route render={Test} path="/home/test" />

标签： reactjs react-router

【解决方案1】：

问题是我在 Parent 中使用了 <Router>，即使 Parent 本身在 <Router> 标签中。在 Parent 中将 <Router> 替换为 <div> 解决了这个问题。

【讨论】：

【解决方案2】：

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

将 BrowserRouter 更改为 HashRouter 并检查，它会停止重新加载问题

【讨论】：