React专用路由重定向条件被忽略

Question

每次我尝试在令牌过期后导航到某个页面时，都不会重定向到我的登录页。理想情况下，我希望在我的代币到期后重定向到我的登录页。我的状态变量会在令牌过期时更新，但在呈现重定向组件时会被忽略。我想我的私人路线可能写错了。

App.js

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import LandingPage from './pages/LandingPage';
import ViewAllRecipe from './pages/ViewAllRecipe';
import AddRecipe from './pages/AddRecipe';
import EditRecipe from './pages/EditRecipe';
import SingleRecipe from './pages/SingleRecipe';
import axios from 'axios';
var status;
async function validToken(){
var token = localStorage.getItem('token');
try{
const res = await axios.post('/api/auth/verify',
{token: token},
{headers: {'Content-Type': 'application/json'}},        
);
if(res.data.status===200){
status = 200;
}
else{
localStorage.removeItem('token');
status= 401;
}   
}
catch(err){
localStorage.removeItem('token');
status=500;
}
}

function PrivateRoute({ children, ...rest }) {
validToken();
return (
<Route
{...rest}
render={() =>
status!==200 ? (
<Redirect
to="/landing"

/>
):(
children
)
}
/>
);
}

function App() {
return (
<Router>
<Switch>
<Route exact path="/landing" component={LandingPage}></Route>
<PrivateRoute exact path="/addRecipe" component={AddRecipe}></PrivateRoute>
<PrivateRoute exact path="/viewRecipes" component={ViewAllRecipe}></PrivateRoute>
<PrivateRoute exact path="/recipe/edit/:editRecipe"  component={(props) => <EditRecipe {...props}/>}></PrivateRoute>
<PrivateRoute exact path="/recipe/view/:id"  component={(props) => <SingleRecipe {...props}/>}></PrivateRoute>
</Switch>
</Router>
);
}
export default App; ```

Answer 1

试试这个：

import React, { useState, useEffect } from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
} from 'react-router-dom';
import LandingPage from './pages/LandingPage';
import ViewAllRecipe from './pages/ViewAllRecipe';
import AddRecipe from './pages/AddRecipe';
import EditRecipe from './pages/EditRecipe';
import SingleRecipe from './pages/SingleRecipe';
import axios from 'axios';
async function getStatus() {
var token = localStorage.getItem('token');
try {
const res = await axios.post(
'/api/auth/verify',
{ token: token },
{ headers: { 'Content-Type': 'application/json' } },
);
if (res.data.status === 200) {
return 200;
} else {
localStorage.removeItem('token');
return 401;
}
} catch (err) {
localStorage.removeItem('token');
return 500;
}
}
function PrivateRoute({ children, ...rest }) {
const [status, setStatus] = useState(null);
useEffect(() => {
(async () => setStatus(await getStatus()))();
}, []);
return (
status && (
<Route
{...rest}
render={() => (status !== 200 ? <Redirect to="/landing" /> : children)}
/>
)
);
}
function App() {
return (
<Router>
<Switch>
<Route exact path="/landing" component={LandingPage}></Route>
<PrivateRoute
exact
path="/addRecipe"
component={AddRecipe}></PrivateRoute>
<PrivateRoute
exact
path="/viewRecipes"
component={ViewAllRecipe}></PrivateRoute>
<PrivateRoute
exact
path="/recipe/edit/:editRecipe"
component={props => <EditRecipe {...props} />}></PrivateRoute>
<PrivateRoute
exact
path="/recipe/view/:id"
component={props => <SingleRecipe {...props} />}></PrivateRoute>
</Switch>
</Router>
);
}
export default App;

第二个参数为[]的useEffect仅在第一次渲染时被调用，它运行一个检查状态并用该状态设置状态的函数。如果状态为null，则不会呈现任何内容，因为异步函数尚未运行，因此您不知道状态(您可以呈现加载(。当状态为处于状态时，它会触发状态为处于的重新渲染