小编Raj*_*boy的帖子

我正在使用 React Router v6 并为我的应用程序创建私有路由。

在文件PrivateRoute.js中，我有代码

import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth}  from 'auth'

function PrivateRoute({ element, path }) {
  const authed = isauth() // isauth() returns true or false based on localStorage
  const ele = authed === true ? element : <Navigate to="/Home"  />;
  return <Route path={path} element={ele} />;
}

export default PrivateRoute

在文件route.js中我写的是：

 ...
<PrivateRoute exact path="/" element={<Dashboard/>}/>
<Route exact path="/home" element={<Home/>}/>

我已经完成了相同的示例React-router Auth 示例 - StackBlitz，文件 App.tsx

我有什么遗漏的吗？

我正在使用 localStorage 来保存登录时的用户数据。我将其保存为“jwt_data”。我在单独的 js 文件上创建了一个函数来检索该数据

export const auth = () => {
  if(localStorage.getItem('jwt_data')){
    return JSON.parse(localStorage.getItem('jwt_data'))
  }else{
    return false
  }
}

我有一个导航栏组件与<徽标，搜索栏，下拉菜单>反应。我想在用户注销后隐藏它并在我登录后显示。我使用代码作为

const auth_user = auth()
........
<>
{auth_user ? (// if logged in..... )  : (// if user is logged out........)

</>

它确实有效。但问题是它不是反应性的。我需要重新加载网站才能看到效果。

我也尝试使用其他例如

const [auth_user, setAuth_user] = useState(false)
useEffect(() => {
 if(auth()) {setAuth_user(true)}    
 else {setAuth_user(false)}
})

其结果与之前相同。我不知道我错在哪里。其他人建议使用 redux 和 things，这对于我的头脑和我的简单应用程序来说太复杂了。

我的 app.js 看起来像这样

import React from 'react';
import Nav from './Nav';
import Home from './Home';
import Login from './Login'; …