javascript - 我在将 Prop 从状态传递给 child 时遇到问题

Question

这是 Login 组件，我在其中创建了身份验证状态，token 为 false，登录后转换为 true

function Login() {
  const [user, setUser] = useState({ name: '', email: '' });
  const [error, setError] = useState('');
  const [auth, setAuth] = useState({ token: false })
  console.log(auth)
  const Login = (details) => {
    console.log(details);
    if (
      details.name === adminUser.name &&
      details.email === adminUser.email &&
      details.password === adminUser.password
    ) {
      console.log('Logged in');
      setAuth({
        token: true,
      })

这工作得很好，但现在当我尝试将其传递给 PrivateRoute 组件时，auth 未定义

const PrivateRoutes = ({ auth }) => {
  console.log(auth)
  return (
    auth ? <Outlet/> : <Navigate to="/login"/>
  )
}

这也是我的 App.jsx

function App() {
  return (
    <Routes>
      <Route element={<PrivateRoutes />}>
        <Route path="/*" element={<MainPage />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>
  );
}

我需要更改什么才能从状态获取数据并使我的防护功能正常工作？

Answer 1

auth 状态应该位于一个共同的祖先中，这样它就可以作为 props 传递下去。

示例:

function App() {
  const [auth, setAuth] = useState({ token: false });

  return (
    <Routes>
      <Route element={<PrivateRoutes auth={auth} />}>
        <Route path="/*" element={<MainPage />} />
      </Route>
      <Route path="/login" element={<Login setAuth={setAuth} />} />
    </Routes>
  );
}

const PrivateRoutes = ({ auth }) => {
  return auth.token ? <Outlet/> : <Navigate to="/login" replace />;
}

function Login({ setAuth }) {
  const navigate = useNavigate();

  const [user, setUser] = useState({ name: '', email: '' });
  const [error, setError] = useState('');

  const login = (details) => {
    if (
      details.name === adminUser.name &&
      details.email === adminUser.email &&
      details.password === adminUser.password
    ) {
      setAuth({ token: true });
      navigate(/* new target path */, { replace: true });

    ...
  }

  ...