Javascript 在使用react路由器dom的链接和交换机时，为什么需要刷新页面？

我是React的初学者，我正在尝试显示我网站的新页面。 我一直在使用react路由器dom的交换机和链路。当我点击一个链接时，该路径被正确修改，但在我刷新它之前，它将保持在同一页面上。刷新后，将显示右侧页面。 有人知道为什么需要刷新吗？是否有解决方案？ 如果没有，是否有自动刷新页面的方法

以下是我的主组件代码：

  render() {
    return (
      <div className="Page">
        <Router>
          <Link to="/MyFiles" className="Element">
            My files
          </Link>
        </Router>
      </div>
    );
  }
}

render（）{
返回(
我的档案
);
}
}

以下是路线设置中的我的代码：

        <Switch>
          <Route
            exact
            path="/"
            component={() => (
              <ConnectedHome
                user={this.state.connectedUser}
                logout={this.logout}
              />
            )}
          />
          <Route
            path="/MyFiles"
            component={() => (
              <MyFiles user={this.state.connectedUser} logout={this.logout} />
            )}
          />
        </Switch>
      );

(
)}
/>
(
)}
/>
);

我也在控制台中得到这些错误

警告：无法在现有状态转换期间更新（例如 在

渲染中

）。渲染方法应该是道具的纯功能 和国家

及

警告：无法对已卸载的组件执行React状态更新。 这是一个no-op，但它表示应用程序中存在内存泄漏。 若要修复，请取消中的所有订阅和异步任务 componentWillUnmount方法

我不知道他们是否与这个问题有关

---

提前感谢您的帮助

在家庭组件中无需再次使用路由器。路由器应该位于定义所有路由的顶层

  render() {
    return (
      <div className="Page">
          <Link to="/MyFiles" className="Element">
            My files
          </Link>
      </div>
    );
  }
}

render（）{
返回(
我的档案
);
}
}

当路由从子组件更改时，它会到达父子树层次结构中最近的路由器。如果在此路由器中为更改的路由定义了任何路由，则组件将呈现该路由，否则将显示相同的页面

---

因此，在您的情况下，当路由更改为“/MyFiles”时，它不会到达您已定义“/MyFiles”路由的顶级路由器，因此页面保持不变，不会重新呈现。仅当您手动刷新时，它才会重新渲染。

在中使用内联函数

}/>

这不是个好习惯。相反，你应该用

}/>

因为每次更新时都会卸载组件。 当你这样做的时候，战争就消失了，它应该会起作用

这里有一篇关于它的文档

使用组件（而不是下面的渲染或子级）时 路由器使用React.createElement从 给定组件。这意味着如果您向 组件道具，您将在每次渲染时创建一个新组件。这 导致现有组件卸载和新组件 安装，而不仅仅是更新现有组件。使用时 对于内联渲染的内联函数，请使用渲染或 儿童道具（下图）

您还可以访问由路由器注入到

的属性历史记录，并在需要时在单击时将其用于重定向

const SomeComponent = ({ history }) => {
    return <Button onClick={() => history.push('yourSubRoute')} />
}

constsomecomponent=（{history}）=>{
返回history.push（'yourSubRoute'）}/>
}

我看到的下一个问题是，您正在使用路由器包装

。路由器应该只使用一次，例如在App.js中

export const = () = App {
    <Router>
       <Switch>
          <Route path='path1'>
          <Route path='path2>
       </Switch>
    </Router>
}

export const=（）=App{
看看这个。