No routes matched location "/" 에러 해결 방법, error ,react-router-dom

문제 코드

  return (
    <BrowserRouter>
      {isLoggedIn && <Navigation userObj={userObj} />}
      <Routes>
        {isLoggedIn && (
          <>
            <Route path={HOME_URL} element={<Home userObj={userObj} />} />
            <Route
              path={PROFILE_URL}
              element={<Profile refreshUser={refreshUser} userObj={userObj} />}
            />
            <Route path={TODOS_URL} element={<ToDos userObj={userObj} />} />
          </>
        )}
      </Routes>
    </BrowserRouter>
  );
}

 

문제 원인

react가 렌더되면서 isLoggedIn 일때가 아닌 !isLoggedIn이 먼저 렌더 되고 그 이후에 isLoggedIn 이 조건이 충족되기 때문에 맨 처음 페이지 렌더 시 이러한 에러 문구가 뜨는 것 같다.

 

 

해결 방법 / 코드

조건문에 해당하지 않는 부분을 먼저 리턴해주고 그 뒤에 조건에 해당하는 부분들을 리턴해주면 오류문구가 뜨지 않고 해결이 됩니다.

  if (!isLoggedIn) {
    return (
      <BrowserRouter>
        <Routes>
          <Route path={HOME_URL} element={<Auth />} />
        </Routes>
      </BrowserRouter>
    );
  }

  return (
    <BrowserRouter>
      <Navigation userObj={userObj} />
      <Routes>
        <Route path={HOME_URL} element={<Home userObj={userObj} />} />
        <Route
          path={PROFILE_URL}
          element={<Profile refreshUser={refreshUser} userObj={userObj} />}
        />
        <Route path={TODOS_URL} element={<ToDos userObj={userObj} />} />
      </Routes>
    </BrowserRouter>
  );
}