Question

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

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

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

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

父母

using System;

namespace myProject.API.Models
{
    public class FilesDetailsDto
    {
        public string FileName { get; set; }
        public DateTime LastModifiedOnFilesystem { get; set; }
    }
}

孩子

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 v5.1.2。

Answer 1

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

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

Answer 2

问题在于即使Parent本身位于<Router>标记中，我也在Parent中使用<Router>。将“父项”中的<Router>替换为“ <div>”。

React Router嵌套重新加载页面

2 个答案: