모달창 내 메뉴 링크

[이후경]

안녕하세요. 질문이 있어 글 올립니다. ㅜㅜ

페이지 클릭하면 페이지 내에서 확인할 수 있는 쪽지함을 만들고 싶은데 

쪽지함 상단의 버튼 클릭시 쪽지함도 이동하지만 그 원래 페이지가 무조건 메인 페이지로 이동하게 됩니다. 

다른 게시판에서 쪽지함 

 

받은 쪽지함 클릭 시, 쪽지 모달창도 변경되긴 하지만, 원본 페이지 역시 메인페이지로 이동함 

저는 어... 그냥 쪽지함을 호출한 위치에서 쪽지함만 이동되었으면 하는데, 어떻게 수정해야 할지 감이 잡히지 않아서 질문글 올립니다. ㅠㅜ 

해당 내용을 검색해보고 싶은데, 어떻게 검색해야 할지 서술형으로 검색해봐도 결과가 나오지 않아요 ㅠㅠㅠㅠㅠㅠㅠ 

 

[codingapple]

라우터 쓰면 a태그말고 history.push() 를 써서 잘 이동하도록 합시다 

[이후경]

 history.push()를 사용해봐도 여전히 모달 창 밖 페이지 여전히 index페이지로 이동합니다. 

메인페이지의 라우터 패스

 <Switch>
          <Route path="/login">
            <Login></Login>
          </Route>
          {/* 회원가입 */}
          <Route path="/signup">
            <Signup></Signup>
          </Route>
          {/* 회원 정보수정*/}
          <Route path="/info-edit">
            <UserInfoEdit></UserInfoEdit>
          </Route>
          {/* 에러페이지 */}
          <Route path="/404-error">
            <Error></Error>
          </Route>
          {/* 이거 살까 게시글 작성 */}
          <Route path="/vote-board/write">
            <VoteBoardWrite></VoteBoardWrite>
          </Route>
          {/* 이거 팔까 게시글 작성 */}
          <Route path="/trade-board/write">
            <TradeBoardWrite></TradeBoardWrite>
          </Route>
          {/* 이거 살까 게시판 */}
          <Route path="/boards/vote-board">
            <VoteBoard></VoteBoard>
          </Route>
          {/* 이거팔까 게시판 */}
          <Route path="/boards/trade-board">
            <TradeBoard></TradeBoard>
          </Route>
          {/* 내 게시글 목록 */}
          <Route path="/user/my-write">
            <MyWrite></MyWrite>
          </Route>
          {/* 타 유저 게시글 목록*/}
          <Route path="/user/user-write">
            <UserWrite></UserWrite>
          </Route>
          <Route path="/">
            <Main></Main>
          </Route>
        </Switch>

 

 

하위 자식 컴포넌트 (쪽지모달창)

 <nav className="message-menus">
                <ul className="message-menu">
                  <li onClick={totalMessage}>전체 쪽지함</li>
                  <Link to={"/"}>
                    <li>전체 쪽지함</li>
                  </Link>
                  <Link to={"/memo/inbox/"}>
                    <li>받은 쪽지함</li>
                  </Link>
                  <Link to={"/memo/sent/"}>
                    <li>보낸 쪽지함</li>
                  </Link>
                  <Link to={"/memo/write/"}>
                    <li>쪽지 쓰기</li>
                  </Link>
                </ul>
                <ul className="message-menu-delete">
                  <li>쪽지 삭제</li>
                </ul>
              </nav>
            </div>
            <div className="message-contents-background">
              <Switch>
                <Route path={"/memo/write/"}>
                  <WriteMessage> </WriteMessage>
                </Route>
                <Route path={"/memo/sent/"}>
                  <SentMessage></SentMessage>
                </Route>
                <Route path={"/memo/inbox/"}>
                  <InboxMessage></InboxMessage>
                </Route>
                <Route path={"/"}>
                  <TotalMessage></TotalMessage>
                </Route>
              </Switch>

 

여기서 

<Route path="/">
            <Main></Main>

</Route>

 

<Route path={"/"}>
                  <TotalMessage></TotalMessage>

</Route>

path 부분이 겹쳐서 그런걸까요..? 

[이후경]

function Message(props) {
  const history = useHistory();
  const totalMessage = () => {
    history.push(/);
  };

  const MessageInbox = () => {
    history.push(/memo/inbox/);
  };
  const MessageSent = () => {
    history.push(/memo/sent/);
  };

  const MessageWrite = () => {
    history.push(/memo/write/);
  };
  return (
    <>
      <div className="message">
        <div className="message-blur-background">
          <div className="message-background ">
            <div className="message-header">
              <FontAwesomeIcon
                className="messaage-close-button"
                icon={faXmark}
                onClick={(event) => {
                  props.setMessageModal(!props.MessageModal);
                  event.stopPropagation();
                }}
              ></FontAwesomeIcon>
              <div className="message-title">
                <h3>경바님의 쪽지함</h3>
              </div>

              <nav className="message-menus">
                <ul className="message-menu">
                  <li onClick={totalMessage}>전체 쪽지함</li>
                  <li onClick={MessageInbox}>받은 쪽지함</li>
                  <li onClick={MessageSent}>전체 쪽지함</li>
                  <li onClick={MessageWrite}>쪽지 쓰기</li>
                </ul>
                <ul className="message-menu-delete">
                  <li>쪽지 삭제</li>
                </ul>
              </nav>
            </div>
            <div className="message-contents-background">
              <Switch>
                <Route path={"/memo/write/"}>
                  <WriteMessage> </WriteMessage>
                </Route>
                <Route path={"/memo/sent/"}>
                  <SentMessage></SentMessage>
                </Route>
                <Route path={"/memo/inbox/"}>
                  <InboxMessage></InboxMessage>
                </Route>
                <Route path={"/"}>
                  <TotalMessage></TotalMessage>
                </Route>
              </Switch>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Message;

  history.push 사용해서 다시 해봤습니다 그래도 안되고 있어요 ㅠㅠ  어렵네요............... 하핳.. 

[codingapple]

<Route path={"/"}> 여기에 exact 속성을 추가해봅시다 

[이후경]

계속 페이지가 이동해서 고민했는데, 생각해보니 그냥 전에 자바 스크립트 시간에 알려주신 거마냥 탭으로 했습니당 ㅋㅋㅋㅋㅋㅋㅋㅋ 야호 감사합니당

[글쓴이]

글