query 변경 시 redirect 되는 문제

[jm020827]

return (
    <div className="AppWrapper">
    <BrowserRouter>
      {token ? (
          <Switch>
            <>
              <Route path="/students" >
                <div className="App" key="students">
                  <Header />
                  <DashBoard />
                  <div className="body">
                    <div className="left">
                      <ControlBar />
                      <StudentList />
                    </div>
                    <div className="border" />
                    <div className="right">
                      <Student />
                    </div>
                  </div>
                  <Adder />
                </div>
              </Route>
              <Route path="/student/:id">
                <div className="App" key="student/id">
                  <StudentDetail />
                  <StudentDetailDeleteModal />
                </div>
              </Route>

              <ToastContainer />
              <Redirect to="/students"/>
            </>
          </Switch>
      ) : (
          <Switch>
            <>
              <div className="App">
                <Route path="/login">
                  <>
                    <Login key="login" />
                  </>
                </Route>
                <ToastContainer />
                <Redirect to="/login" />
              </div>
            </>
          </Switch>
      )}
      </BrowserRouter>
    <PopUp isPopUp={isPopUp} setIsPopUp={setIsPopUp} setCookie={setCookie} />
    </div>
  )

import "./ControlBar.css";
import React, { useContext } from "react";
import { StudentContext } from "../ContextSet";
import { useLocation } from "react-router";

const ControlBar = () => {

  

  const location = useLocation();
  const query = new URLSearchParams(location.search);


  return (
    
    <form className="controlbar" >
      <input
        name='name'
        type="search"
        className="controlbarinput"
        placeholder="이름"
        />
      <input
      name='grade'
      type="search"
      className="controlbarinput"
      placeholder="학년"
      />
    <button type='submit'>검색</button>
    </form>

  );
};

export default ControlBar;

위 코드는 App.js에서 Router를 관리하는 return 부분이고 아래 코드는 검색 기능이 있는 ControlBar 컴포넌트의 코드 전문입니다.
form으로 검색 기능을 바꾸고 submit 할 때마다 url query가 변경되지만 이내 바로 redirect 되듯이 다시 /students로 돌아오고 맙니다.
아예 구조자체가 문제인건지 아무리 봐도 모르겠어서... 어느부분에서 어떻게 문제가 되고 있는 것인지 확인해주시면 감사하겠습니다 ㅠㅠ

[woohm402]

https://v5.reactrouter.com/web/api/Switch

공식문서에 따르면 Switch 는 직계 child 중 첫 번째로 생성 가능한 친구만 살리고 나머지는 띄우지 않는 친구입니다.
올려주신 코드의 첫 번째 파트를 보면 아래와 같은 형식입니다. (줄번호는 그냥 설명 편의상 달았습니다)

1  <Switch>
2   <>
3     <Route />
    ...
29  </>
30 </Switch>

즉 Switch의 직계 child 중 첫 번째 녀석인 2~29번 줄이 모두 살게 됩니다. 즉 그 Switch는 아무 효과를 내지 못합니다.
아무튼, 그 효과로 인해 해당 코드는 Switch 없이 아래를 리턴한 것과 같은 효과를 냅니다.

              <Route path="/students" >
                <div className="App" key="students">
                   ...어쩌구
                </div>
              </Route>
              <Route path="/student/:id">
                <div className="App" key="student/id">
                  ...저쩌구
                </div>
              </Route>
              <ToastContainer />
              <Redirect to="/students"/>

즉 리액트가 이중 마지막에 있는 <Redirect /> 를 죽이지 않고 제대로 렌더하게 됩니다.
다시 공식문서 에 따르면,

Rendering a <Redirect> will navigate to a new location.

그래서 무조건 /students 로 리다이렉트되게 됩니다.
학생 상세페이지도 안 들어가지실 것 같은데, (/student/:id) 잘 들어가지시나요?

[jm020827]

if (token === null) {
    return (
      <BrowserRouter>
        <Route exact path="/login" component={LoginPage}/>
        <Redirect to="/login" />
      </BrowserRouter>
    );
  }

  return (
    <BrowserRouter>
      <Route exact path="/students" component={Students}/>
      <Route exact path="/student/:id" component={StudentId}/>
      <Redirect to="/students"/>
    </BrowserRouter>
  );

#591 대로 이렇게 수정하고 문제가 된다고하신 Switch문은 아예 지워버렸습니다. 그런데도 아직도 Redirect 되는 것 같습니다.

[jm020827]

그리고 클릭으로 /student/:id 들어가지는 건 Link로 해당 페이지에 직접 연결하는 것으로 구현했는데 이것이 관련이 있으려나요..? 다른분들 코드는 아직 본적이 없어서 잘 모르겠습니다.. 이것도 와장님 생각과 다르게 구현되는 것이라면 문제가 있을 것 같아 수정해야 하는 부분이라면 수정해보겠습니다.

[woohm402]

헐 제가 #591 에서 실수했네요 수정했습니다

Switch 없으면 돌아갈 리가 없는데 실수했네요ㅠㅠ

[jm020827]

지금 Switch 다시 추가했는데도 실행 안되는거보니 다른 부분에도 문제가 있는 것 같습니다..ㅠ 일단 더 찾아보겠습니다 감사합니다!

[jm020827]

state에 저장한 token으로만 로그인 여부를 확인하다보니 렌더되면서 token이 null이 됨 -> localstorage에서 다시 받음 -> /students 로 접근 -> Redirect에 걸림
이런 흐름이었던 것 같습니다!
로그인 여부를 확인할 때 state token뿐만 아니라 localStorage.getItem(token) 까지 확인해주니 해결됐습니다! 감사합니다!

if (token === null && !localStorage.getItem('token')) {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/login" component={LoginPage} />
          <Redirect to="/login" />
        </Switch>
        <Popup isPopUp={isPopUp} setIsPopUp={setIsPopUp} setCookie={setCookie} />
      </BrowserRouter>
      
    );
  }

  return (
    <BrowserRouter>
      <Switch>
        <Route path='/students'>
          <Students />
        </Route>
        <Route path='/student/:id'>
          <StudentId/>
        </Route>
        <Redirect to='/students'/>
      </Switch>
      <Popup isPopUp={isPopUp} setIsPopUp={setIsPopUp} setCookie={setCookie} />
    </BrowserRouter>
  );