583페이지 20.4.6 ssr-recipe (saga) 출력이 안됩니다.

[oieho]

learning-react 마스터 브랜치에 있는 20.4 다운로드하여서 package 설치해준 뒤 실행하면 두 번째 axios로 불러온 데이터 출력이 안됩니다. 이것저것 수정도 해보고 찾아봤지만 해결이 안되고 있습니다.

583페이지 그림20-11처럼 사용자 이름 누른 뒤에 Bret (Leanne Graham) e-mail: [email protected]가 UsersContainer 밑에 출력이 되어야하는데 이름 누르면 url 값 변화 외에 아무 변화도 없습니다..

성공하신 분 어떻게 하셨는지 알려주시거나 소스 다운로드할 수 있게 링크 주시면 감사드립니다.

[Phantasia0]

오래되서 해결하셨을지 모르겠지만, 비슷한 문제있으신분들은 이렇게 해결하시면 됩니다.

"react-router-dom": "^6.10.0" 메이저 6버전 기준입니다.

App.js

import { Route, Routes } from 'react-router-dom';
import BluePage from './pages/BluePage';
import RedPage from './pages/RedPage';
import Menu from './components/Menu';
import UsersPage from './pages/UsersPage';

function App() {
  return (
    <div>
      <Menu />
      <hr />
      <Routes>
        <Route path="/red" element={<RedPage />} />
        <Route path="/blue" element={<BluePage />} />
        <Route path="/users/*" element={<UsersPage />} />
      </Routes>
    </div>
  );
}

export default App;

UsersPage.js

import UsersContainer from '../container/UsersContainer';
import UserContainer from '../container/UserContainer';
import { Route, Routes } from 'react-router'; //변경사항

const UsersPage = () => {
  return (
    <>
      <UsersContainer />
      <Routes>
        <Route
          path="/:id"
          element={<UserContainer />}
          //render={({ match }) => <UserContainer id={match.params.id} />}
        />
      </Routes>
    </>
  );
};

export default UsersPage;

UserContainer.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import User from '../components/User';
import { Preloader } from '../lib/PreloadContext';
import { getUser } from '../modules/users';
import { useParams } from 'react-router';

const UserContainer = () => {
  const { id } = useParams();
  const user = useSelector((state) => state.users.user);
  const dispatch = useDispatch();

  useEffect(() => {
    if (user && user.id === parseInt(id, 10)) return;
    dispatch(getUser(id));
  }, [dispatch, id, user]);

  if (!user) {
    return <Preloader resolve={() => dispatch(getUser(id))} />;
  }
  return <User user={user} />;
};

export default UserContainer;

변경사항은

1. 컨테이너 컴포넌트에서 useParams 훅 이용입니다
2. 라우팅 이어줄때 Routes로 감싸주고, render 속성 대신, element 속성씀에 따라, 라우터 경로를 그에 맞춰주었습니다.