为什么在 react-router-dom 中使用 Link 和 Switch 时需要刷新页面？答案

【问题标题】：Why do I need to refresh the page when using Link and Switch with react-router-dom?为什么在 react-router-dom 中使用 Link 和 Switch 时需要刷新页面？
【发布时间】：2021-07-14 09:47:57
【问题描述】：

我是 React 的初学者，我正在尝试展示我网站的新页面。我一直在使用 react-router-dom 中的 Switch 和 Link。当我点击一个链接时，路径被正确修改，但它保持在同一页面上，直到我刷新它。刷新后，将显示正确的页面。有谁知道为什么需要刷新以及是否有解决方案？如果没有，有没有办法自动刷新页面？

这是我的 Home 组件代码：

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

这是我在路线设置中的代码：

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

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

警告：在现有状态转换期间无法更新（例如在render) 内。渲染方法应该是 props 的纯函数和状态。

和

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消所有订阅和异步任务 componentWillUnmount 方法。

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

提前感谢您的帮助！

【问题讨论】：

查看link。

标签： javascript reactjs react-router-dom

【解决方案1】：

在 Home 组件中无需再次使用路由器。路由器应该出现在定义所有路由的顶层

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

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

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

【讨论】：

谢谢你救了我的命：p

【解决方案2】：

使用内联函数

<Route component={() => <SomeComponent/>}/>

不是好习惯。相反，您应该将其替换为

<Route render={(props) => <SomeComponent {...props} yourProperty1={something} yourProperty2={something} />}/>

因为每次更新时都会卸载您的组件。当你这样做时，警告就会消失，它应该可以工作。

这是有关它的文档中的文章

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#component

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

您还可以访问由路由器注入到<SomeComponent/> 的属性历史记录，并在需要时将其用于点击重定向

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

我看到的下一个问题是您使用路由器来包装<Link/>。路由器应该只使用一次，例如在 App.js 中像这样

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

在<SomeCompnent/> 中只使用<Link/> 而不将其包装到<Router/>

【讨论】：