[React] React-router-dom을 통한 접근 경로 제한

1. 경로 제한하기

사용자가 로그인을 하면 마이페이지로 이동이 가능하지만
로그인을 하지 않은 상태에서 마이페이지로 이동하면 안된다.
또한 로그인을 하지 않을 때만 회원가입 페이지로 이동이 가능하게 구현해야 한다.

1.1 우선 경로를 제한하는 ProtectedRoute 컴포넌트를 생성한다.

📁 pages 👉 📁 ProtectedRoute.jsx

• ProtectedRoute 컴포넌트의 children은 Mypage와 SignUp 컴포넌트에 해당한다.

export default function ProtectedRoute({ children, requireUser }) {
    const userData = useSelector((state) => state.userData);
    //유저가 필수인 상태 + 유저 id 존재하면 마이페이지 보여줌.
    //유저가 필수 상태가 아님 + 유저 id 존재 안하면 회원가입 안보여줌. 
    if ((requireUser && userData.uid) || (!requireUser && !userData.uid)) return children;
    return <Navigate to='/' replace />;
}

• 유저가 필수인 상태 속성 requireUser는 Router.js에서 따로 부여해준다.
• 그외에 경우는 해당 페이지(Mypage,SignUp)를 접근할 수 없도록 홈으로 redirect한다.

1.2 이제 router.js에서 경로를 제한하는 라우트를 감싸준다.

ProtectedRoute 컴포넌트로 감싸주면서 생긴 오류 코드

const Router = () => {
  return (
    <>
      <GlobalStyle />
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
            <Route path="" element={<Home />} />
            <Route path="keyword/:id" element={<Keyword />} />
            <Route path="keywordchat/:id" element={<KeywordChat />} />
              <ProtectedRoute requireUser>
            <Route path="mypage/:id" element={<Mypage /> } />
              </ProtectedRoute>
			<ProtectedRoute requireUser={false}>
            <Route path="signup/" element={<Signup />}/>
            </ProtectedRoute> 
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
};

위 코드를 작성하니
Error: [ProtectedRoute] is not a component. All component children of must be a or <React.Fragment> 이러한 에러가 발생했다.

👉 원인은 Route 속성 element 안에서 ProtectedRoute컴포넌트를 감싸주지 않아서 발생한 문제이다.
➡️ 따라서 ProtectedRoute 컴포넌트를 element 속성 안에서 정의한다.

문제 해결한 코드

const Router = () => {
  return (
    <>
      <GlobalStyle />
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
            <Route path="" element={<Home />} />
            <Route path="keyword/:id" element={<Keyword />} />
            <Route path="keywordchat/:id" element={<KeywordChat />} />
            <Route path="mypage/:id" element={<ProtectedRoute requireUser><Mypage /> </ProtectedRoute>} />
            <Route path="signup/" element={<ProtectedRoute requireUser={false}><Signup /></ProtectedRoute>} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
};

➡️ 로그인을 하면 더이상 회원가입 경로를 직접 입력해도 들어가지지 않았다. 또한 로그아웃을 하면 마이페이지로 이동하지 못하도록 잘 된다!!

문제 해결한 출처)
https://stackoverflow.com/questions/69864165/error-privateroute-is-not-a-route-component-all-component-children-of-rou