使用相同的組件但使用不同的參數來響應多個路由

Question

我有一個具有多個狀態的Login組件，具體取決於 url 我想在此組件中顯示不同的元素。 這是我設置Routes的方式

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

// Pages

import Home from '../pages/home';
import Login from '../pages/login';


export default function App() {
  
  // Render
  
  return (
    <div className="app">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}/>
          <Route exact path="/login" element={<Login state="login"/>}/>
          <Route exact path="/signup" element={<Login state="signup"/>}/>
          <Route exact path="/reset-password" element={<Login state="reset"/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
  
}

我正在使用 BrowserRouter v6，每當我加載/重新加載頁面時，這段代碼都可以正常工作。 但是，使用<Link to="/reset-password"></Link>到 go 從一個Login頁面到另一個頁面似乎不會重新安裝頁面上的組件。

我已經看到一些將<Route exact path="/login" component={...}/>與 BrowserRouter v5 一起使用的示例，但在使用此版本的component而不是element時，我似乎無法讓它顯示任何內容。

我有什么我想念的東西還是我做錯了？

Answer 1

v6 的一項新功能是新的 Outlet 組件。 查看創建帶有插座的布局是否可以幫助您： https://reactrouter.com/docs/en/v6/examples/basic

Answer 2

我有這種類型的問題。 我有一個表作為子組件到具有不同過濾器的兩條不同路由的父組件中。 對數據的異步調用已進入父組件，並且被設置為 redux 存儲。 表正在從該商店獲取數據。

問題是，當我在這兩條路線之間切換時，更新表中的數據會出現延遲。

所以我通過在卸載子組件（表）時清除 redux state 來解決問題。 像這樣

useEffect(() => {
    return ()=>{
       // cancel previous API calls that are being used to list data
      //clear data from redux store
    }
  },[dispatch])

這里需要注意的一點是這段代碼要寫在子組件中

（在我的例子中是表）。