為什么在 react-router-dom 中使用 Link 和 Switch 時需要刷新頁面？

Question

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

我也在控制台中收到這些錯誤

警告：在現有 state 過渡期間無法更新（例如在render中）。 渲染方法應該是純 function 的 props 和 state。

和

警告：無法對未安裝的組件執行 React state 更新。 這是一個無操作，但它表明您的應用程序中存在 memory 泄漏。 要修復，請取消 componentWillUnmount 方法中的所有訂閱和異步任務。

我不知道他們是否與這個問題有關。

預先感謝您的幫助 ！

Answer 1

無需在 Home 組件中再次使用路由器。 路由器應該出現在定義所有路由的頂層

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

當路由從子組件更改時，它會到達父子樹層次結構中最近的路由器。 如果在此路由器中為更改的路由定義了任何路由，則組件將呈現或顯示相同的頁面。

因此，在您的情況下，當路由更改為“/MyFiles”時，它不會到達您為“/MyFiles”定義路由的頂級路由器，因此頁面保持不變並且不會重新渲染。 只有當您手動刷新它時才會重新渲染。

Answer 2

在中使用內聯 function

<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 從給定組件創建一個新的 React 元素。 這意味着如果您為組件屬性提供內聯 function，您將在每次渲染時創建一個新組件。 這會導致現有組件卸載和新組件安裝，而不是僅僅更新現有組件。 當使用內聯 function 進行內聯渲染時，請使用 render 或 children 道具（如下）。

您還可以訪問由路由器注入到<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/>