인프런 커뮤니티 질문&답변

안녕하세요. v6 업데이트 후 중첩 라우터 문제가 있어 질문 드립니다.

로그인 성공 시, http://localhost:3090/workspace/channel 로 이동하게 하였는데 workspace 컴포넌트에서 channel 컴포넌트를 호출하도록 중첩 라우팅 처리한 부분이 동작하지 않습니다.

Workspace/index.tsx

import fetcher from '@utils/fetcher';
import React, { FC, useCallback } from 'react';
import useSWR from 'swr';
import axios from 'axios';
import { Redirect, Switch } from 'react-router';
import { BrowserRouter, Routes, Route, useNavigate, Navigate, Outlet } from 'react-router-dom';
import { Header, RightMenu, ProfileImg, ProfileModal, LogOutButton, WorkspaceWrapper, Chats } from '@layouts/Workspace/styles';
import gravatar from 'gravatar';
import loadable from '@loadable/component';

const Channel = loadable(() => import('@pages/Channel'));
const DirectMessage = loadable(() => import('@pages/DirectMessage'));

const Workspace : FC = ({children}) => {
  const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher); // 전역

  const onLogout = useCallback(() => {
    axios
      .post('http://localhost:3095/api/users/logout', null, {
        withCredentials: true,
      })
      .then(() => {
        mutate(false);
      });
  }, []);

  if (!data) {
    console.log('data', data);
    return <Navigate to="/login" replace />;
  }

  console.log("workspace page rendering");

  return (
    <Chats>
      <div>테스트</div>
      <Routes>
        <Route path="/channel/:channel" element={<Channel />} />
        <Route path="/dm/:id" element={<DirectMessage />} />
      </Routes>
    </Chats>
  );
}

export default Workspace;

pages/index.tsx

import React from 'react';
import { Container, Header } from './styles';

const Channel = () => {

  console.log("channel page rendering");

  return (
    <div>채널!</div>
  );
}

export default Channel;

App/index.tsx

import React from 'react';
import loadable from '@loadable/component';
import { Redirect } from 'react-router';
import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';

const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));
const Workspace = loadable(() => import('@layouts/Workspace'));

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate replace to="/login" />} />
      <Route path="/login" element={<LogIn />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/workspace/:workspace/*" element={<Workspace />} />
    </Routes>

  );
};

export default App;

http://localhost:3090/workspace/channel

로그인에 성공하여 위의 주소로 이동 시, 테스트 라는 글씨만 표시되고 채널! 이라는 글씨가 표시되지 않습니다.

코드는 공지사항에 있는 링크와 동일하게 작성을 하였는데 잘못 처리한 부분이 있을까요? 바쁘실텐데 확인 한번 해주시면 감사하겠습니다.