/service我有一個 React 組件，當我訪問我的網站路徑時會呈現該組件。例如my-site.com/service。
問題是，這個頁面只有在登錄后才能查看，否則會被重定向到登錄頁面。但是，在重定向之前，組件會在瞬間閃現到螢屏上。
如何在尚未登錄時完全阻止我的組件顯示？
到目前為止，這就是我嘗試過的方式：
我正在使用class component.
在componentDidMount()中，如果getUsers函式回傳錯誤（表示未登錄），則將redirect變數設定為true。
componentDidMount() {
UserService.getUsers().catch((err) => {
this.setState({ redirect: true });
});
}
然后我像這樣使用該變數：
render() {
const { redirect } = this.state;
if (redirect) {
return <Navigate to="/login" />;
}
return (
<Fragment>
<div>This is my div</div>
<div>OTHER IMPORTANT DATA</div>
<Fragment>
);
}
因此，當未登錄時，您仍然可以在被重定向之前的一瞬間div。OTHER IMPORTANT DATA我怎樣才能防止這種情況發生？
這是我的App.js：
function App() {
return (
<Fragment>
<Router>
<HeaderComponent />
<Routes>
<Route path="/login" element={<Login />}></Route>
<Route path="/register" element={<Register />}></Route>
<Route path="/service" element={<MyComponent />}></Route>
<Route path="/" element={<LandingPage />}></Route>
</Routes>
<FooterComponent />
</Router>
</Fragment>
);
}
uj5u.com熱心網友回復：
添加另一個狀態值，指示加載是否完成。如果未加載，則不渲染（或占位符）。如果已加載，則執行您現在正在執行的操作。
state = {
redirect: false,
loaded: false,
}
componentDidMount() {
UserService.getUsers()
.then(() => {
this.setState({ loaded: true });
}).catch((err) => {
this.setState({ loaded: true, redirect: true });
});
}
render() {
const { redirect, loaded } = this.state;
if (!loaded) {
return null;
}
if (redirect) {
return <Navigate to="/login" />;
}
return (
<Fragment>
<div>This is my div</div>
<div>OTHER IMPORTANT DATA</div>
<Fragment>
);
}
uj5u.com熱心網友回復：
您可以使用 userender func這將允許您在渲染組件之前執行一些邏輯，訪問路由時必須渲染/service您可以在定義路由時這樣做
<Route path="/service" render={(routeProps) => {
// here you can perform you checking before rendering the component
if(authenticated) {
return <MyComponent />
} else {
return <Redirect to="/somewhere/else" />
}
}}></Route>
使用此邏輯，您應該已經定義了一些方法來檢查用戶是否登錄并將其存盤為用于執行身份驗證檢查的狀態。而且您不必在該組件內部定義任何邏輯來檢查用戶是否已通過身份驗證，因為它只會在用戶通過身份驗證時呈現
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/418408.html
標籤：