BrowserRouter

funtion Router(){
	return <BrowserRotuer>
              <Header />
              <Routes>
                  <Route path="/" element={<Home />}/>
                  <Route path="/about" element={<About />}/>
              </Routes>
            </BrowserRouter>

}

createBrowserRouter

아래의 errorElement를 각 routing마다 지정해준다면 해당 페이지의 에러가 다른페이지에 영향을 주지 않는다.

const router = createBrowserRouter(
	[
    	{
        	path:"/",
            element: <App />,
            childres:[
            	{
                	path:"",
                    element:<Home/>,
                    errorElement : <HomeErrorPage />
                },
                {
                	path:"about",
                    element:<About/>
                }
            ],
            errorElement : <404NotFount />
        }
    ]
)

위의 파일을 작성 후 , index.tsx파일을 아래와 같이 변경한다.

roo.render(
	<React.StrictMode>
    	<RouterProvider router={router}/>
    </React.StrictMode>
)

마지막으로 App.tsx를 수정한다.

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

function App() {
  return (
    <div>
      <Outlet />
    </div>
  );
}

useNavigate

const navigate = useNavigate()


<button onClikc={()=>navigate("/about)}>About 이동</button>

useParams

Next.js의 router.query.id와 같은 기능

const {id} = useParams()