react-router-dom 傳遞 useState 以重用其他路由

Question

所以我在這里看不到與 react-hooks 相關的東西，而且我在 react 組件中沒有一點邏輯與路由中的傳遞state有關。

所以基本上是這樣的。

      <Router>
        <Navbar></Navbar>
        <Routes>
          <Route path="/guest" element={<Guest></Guest>}></Route>
          <Route path="/saved" element={<SavedItem></SavedItem>}></Route>
          <Route path="/selectedgallery" element={<SelectedGallery></SelectedGallery>}></Route>
          <Route path="/selectedsavedgallery" element={<SelectedSaveGallery></SelectedSaveGallery>}></Route>
          <Route path="/login" element={<Login></Login>}></Route>
          <Route path="/register" element={<Register></Register>}></Route>
          <Route path="/" element={<Gallery></Gallery>}></Route>
          <Route path="/create" element={<CreatePin></CreatePin>}></Route>
        </Routes>
      </Router>

如您所見，我有<Login>並且我想做的事情將在該區域傳遞我的 useState() ，當我獲得用戶時，我將在其他路線中傳遞它，以便我可以將它重用於已登錄的用戶。

我想它看起來像這樣

    const [owner,setOwner] = useState()
    
    ...
   <Route path="/login" element={<Login></Login>} {whatever here to pass the "setOwner" and "owner".} ></Route>
    ...

然后我將在路由/saved ， /create ， /selectedsavedgallery中使用它，以防萬一用戶未登錄，我會將其重定向到/login router 或/register 。 但我缺乏信息。

Answer 1

setOwner 可以作為參數傳遞給 Login 元素

<Route path="/login" element={<Login setOwner={setOwner}/>} />

在登錄

function Login({setOwner}) {
  ...
  setOwner("foo");
  ...
}