[트러블 슈팅] react router v6 오류 해결

에러 메시지

Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
useRoutes는 <Router>로 감싸야 한다.

 

 

 

해결 방법

 

react router를 추가하는 과정에서 오류가 발생했다.

에러메시지를 구글링해서 찾아보니 <Router>로 감싸주면 되었다. 

 

이에 맞춰서 라우터 파일에서 라우터가 잘 동작하는 코드를 작성했는데 또 오류가 발생했다.

라우터 파일의 이름을 Router.tsx로 만들어 놓았는데, 컴포넌트 이름 Router가 { BrowserRouter as Router }의 Router와 겹쳤기 때문에 발생한 오류였다.

 

import { BrowserRouter as Router } from 'react-router-dom'을 Router.tsx 파일에서 직접 사용하지 않고,

index.tsx 파일에서 App 컴포넌트를 감싸줄 때 import { BrowserRouter } from 'react-router-dom'을 추가하니 해결이 되었다.

 

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

 

// Router.tsx

import { Route, Routes } from 'react-router-dom';
import React from 'react';

import { PATH } from './lib/const/path';
import {
  SignInPage, SignUpPage, Component, Home,
} from './ui/pages';

const Router = () => (
  <Routes>
    <Route path={PATH.HOME} element={<Home />} />
    <Route path={PATH.SIGN_IN} element={<SignInPage />} />
    <Route path={PATH.SIGN_UP} element={<SignUpPage />} />
    <Route path={PATH.COMPONENT} element={<Component />} />
  </Routes>
);

export default Router;