Written by Nostrss
on December 18, 2022

[월간코딩] #5 Side Bar 수정

기존 사이드바 만들기 글 보기

문제 발생

사이드 바에서 버튼을 클릭하여 dynamic routing 할 때 baseurl + 경로 로 이동하지 않음

원인(As-Is)

App 컴포넌트 안에 Router가 있는데 Layout이 App 밖에 있었다.

index.tsx

<React.StrictMode>
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <Layout>
          <App />
        </Layout>
      </Provider>
    </QueryClientProvider>
  </ThemeProvider>
</React.StrictMode>

App.tsx

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route>
          <Route path='/:id' element={<Memo />} />
          <Route path='/' element={<HomePage />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Layout.tsx

export default function Layout({ children }: IProps) {
  return (
    <>
      <WrapperRow>
        <SideBar />
        <main>{children}</main>
      </WrapperRow>
    </>
  );
}

수정(To-Be)

index.tsx

Layout을 index에서 삭제

<React.StrictMode>
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <App />
      </Provider>
    </QueryClientProvider>
  </ThemeProvider>
</React.StrictMode>

App.tsx

Layout을 App 컴포넌트 안에 추가

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route element={<Layout />}>
          <Route path='/:id' element={<Memo />} />
          <Route path='/' element={<HomePage />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Layout.tsx

Outlet 컴포넌트 추가

import { Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <>
      <WrapperRow>
        <SideBar />
        <Outlet />
      </WrapperRow>
    </>
  );
}

← → Top