嗨，我想創建一個小的彈出系統，如果用戶在點擊他的收藏時沒有登錄，他會被重定向到有一個狀態（登錄）的登錄頁面，我想在此基礎上顯示彈出，并在執行彈出后洗掉該狀態，所以它不會在重新加載頁面時總是執行。現在，它 "有點 "作業，但例如，當我重新加載帶有Logged=false的網頁時，它將總是停止彈出，我不希望這樣。另外，現在如果有人退出（所以currentUser改變），它也會重定向到?logged=false路徑并顯示彈出，我寧愿重定向到/login而不顯示彈出。下面是我的代碼：
login.js
const location = useLocation();
const notify = () =>
toast.error("You must be logged in to view your collection!" /span>, {
位置。"底部-中心"。
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
useEffect(() => {
const queryParams = new URLSearchParams（location.search）。
if (queryParams.has("logged"/span>)) {
notify()。
}
}, []);
return (
<> {location.search ?
{location.search ? (
<ToastContainer
position="bottom-center"/span>
autoClose={5000}。
hideProgressBar={false}{/span>
newestOnTop={false}>
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
) : (
空
)}
其余的登錄表格...
usercollection.js
return (
<>
{currentUser === null ?
<Redirect {currentUser == null ?
to={{}.
pathname: "/login"。
state: { loggedIn: "false" },
搜索: "?logged=false"。
}}
/>
) : (
<> :(
其余的集合代碼...
uj5u.com熱心網友回復：
假設你有一些支持登錄和非登錄用戶的組件。
const CollectionPublic = (/span>) => {
return "Public Collection Content"。
}
const CollectionPrivate = (/span>) => {
return "私人收藏內容"。
然后，你的路由應該把用戶送到正確的地方。
< Route path="/collection" render={props =>
用戶 ? <CollectionPublic /> 。<CollectionPrivate /> : <CollectionPrivate />
}/>
現在是關于如何創建一個用戶并將其發送到Route。有很多方法，但假設用戶是用一個背景關系建立的。
const UserContext = React.createContext({)
用戶。null,
login: () => {}.
})
一旦你向應用程式的其他部分提供了這個背景關系，例如在App.
中。 const App = （） => {
...
//關于如何得出用戶和登錄的邏輯。
return (
<UserContext.Provider value={{user,/span> login}}>/span>
//你的所有路由或其他什么
</UserContext.Provider
)
如果任何組件想要訪問用戶資訊，你可以
const CollectionPublic = (/span>) => {
const { login } = useContext(UserContext)
const onClick = (/span>) => {
///要么重定向到登錄頁面，要么
login()
}
return <button onClick={onClick}> content private</button>
}
只是一個想法。通常情況下，任何為react建立的認證都應該有類似的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/320520.html
標籤：