>source

나는 사용하려고 history.push() 토큰을 설정 한 후. 어떻게 든 페이지가 새 경로로 리디렉션되지 않습니다. 나는 사용했다 useHistory 기록에 액세스하는 기능. 페이지를 다시로드하면 홈으로 리디렉션됩니다. 나는 다른 종류의 해킹을 시도했지만 해결책을 찾지 못했습니다. 도와주세요.

App.js

function App() {
  const [isAuthenticated, setAuthenticated] = useState(false);
  useEffect(()=>{
    if(cookie.get('authorization')){
      setAuthenticated(true);
    }
    else{
      setAuthenticated(false);
    }
  },[])
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {isAuthenticated?<Redirect to="/home"/>:<Login />}
        </Route>
        <PrivateRoute exact path="/user/:id" component={UserDetail} auth={isAuthenticated} />
        <PrivateRoute exact path="/createuser" component={CreateUser} auth={isAuthenticated} />
        <PrivateRoute exact path="/home" component={ListUser} auth={isAuthenticated} />
      </Switch>
    </Router>
  );
}
export default App;

login.js

import React, { useEffect, useState } from 'react';
import {useHistory} from 'react-router-dom';
function Login() {
    const history = useHistory();
    const loginUser = (body) => {
        SetLoader(true);
        fetch('/api/v2/users/tokens', {
            method: 'POST',
            body: JSON.stringify(body),
            headers: {
                'Content-Type': 'application/json',
            }
        })
            .then(response => {
                SetLoader(false);
                if (response.status == 200) {
                    SetError(false);   
                    cookie.set('authorization',response.headers.map.authorization,{path:'/'});
                    history.push('/');
                }
                else {
                    SetError(true);
                    StoreResponse(JSON.parse(response._bodyInit).message);
                }
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }
}
export default Login;

  • 답변 # 1

    어디 있는지 모르겠어 history 정의됩니다 Login 구성 요소. 또한 쿠키를 설정했지만 isAuthenticated 때만 설정됩니다 App 구성 요소가 마운트되면 나중에 업데이트되지 않습니다.

    콜백을 전달할 수 있습니다. Login 상태를 업데이트하려면 App 리디렉션이 자연스럽게 발생하도록합니다. App 다시 포함 된 경로를 다시 렌더링하고 다시 렌더링합니다. isAuthenticated 상태. 그만큼 Switch 또한 이미 경로를 독점적으로 일치시키고 렌더링하려고 시도하므로 경로를 가장 구체적으로 지정하고 가장 구체적으로 지정하지 않아도됩니다. exact 모든 경로에 소품.

    function App() {
      const [isAuthenticated, setAuthenticated] = useState(false);
      useEffect(() => {
        if (cookie.get("authorization")) {
          setAuthenticated(true);
        } else {
          setAuthenticated(false);
        }
      }, []);
      return (
        <Router>
          <Switch>
            <PrivateRoute
              path="/user/:id"
              component={UserDetail}
              auth={isAuthenticated}
            />
            <PrivateRoute
              path="/createuser"
              component={CreateUser}
              auth={isAuthenticated}
            />
            <PrivateRoute
              path="/home"
              component={ListUser}
              auth={isAuthenticated}
            />
            <Route path="/">
              {isAuthenticated ? (
                <Redirect to="/home" />
              ) : (
                <Login setAuthenticated={setAuthenticated} /> // <-- pass callback
              )}
            </Route>
          </Switch>
        </Router>
      );
    }
    
    

    로그인

    function Login({ setAuthenticated }) { // <-- destructure prop
      const loginUser = (body) => {
        SetLoader(true);
        fetch("/api/v2/users/tokens", {
          method: "POST",
          body: JSON.stringify(body),
          headers: {
            "Content-Type": "application/json"
          }
        })
          .then((response) => {
            if (response.status == 200) {
              SetError(false);
              cookie.set("authorization", response.headers.map.authorization, {
                path: "/"
              });
              setAuthenticated(true); // <-- set authenticated
            } else {
              SetError(true);
              StoreResponse(JSON.parse(response._bodyInit).message);
            }
          })
          .catch((error) => {
            console.error("Error:", error);
          })
          .finally(() => {
            SetLoader(false); // <-- set loading false in finally block
          });
      };
      ...
    }
    
    

관련 자료

  • 이전 javascript - 그 안에있는 버튼을 사용하여 dom 요소 삭제, vanilla JS
  • 다음 javascript - 문자열의 일부를 JSX 요소로 변경하는 방법은 무엇입니까?