[ React ] React Router 를 이용한 간단한 페이지 이동

 

 

리액트를 다시 복습하는 과정에서

내가 알던 React Router 방식인 <Router> 안에, <Routes> 안에, <Route>

.. 생략
return (
<Router>
 <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/detail" element={<Detail />} />
 </Routes>
</Router>

 

이 방식을 사용하던 도중 계속되는 에러를 만났다.

원인을 찾던 도중 React Router 공식 문서를 통해 사용 방법이 업데이트 되었다는 것을 알았다.

 

가장 최신에 업데이트된 react-router-dom 6.4 버전부터는 업데이트가 되어
BrowserRouter 사용이 불가능 했다.

 

https://reactrouter.com/en/6.23.0/routers/create-browser-router

참고 ⬇️⬇️⬇️

createBrowserRouter v6.23.0 | React Router

 

새롭게 변경 된 방식을 쉽게 알아보자면

이전에 <Router> 안에, <Routes> 안에, <Route path> 를 사용하는 방식이 아닌,

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
function App() {
  const router = createBrowserRouter([
    { path: "/", element: <Home /> },
    { path: "/movie", element: <Detail /> },
  ]);
  return <RouterProvider router={router} />;
}

export default App;

 

이런 방식으로 훨씬 깔끔하게 페이지를 라우팅 하는 방식으로 변했다 !