첫번째 방법으로
index.js 에
const router = createBrowserRouter([
{
path: '/',
element: <App />,
errorElement: <NotFound />,
children: [
{index: true, element: <Videos />},
{path: 'videos', element: <Videos />},
{path: 'videos/:keyword', element: <Videos />},
{path: 'videos/watch/:asd', element: <VideoDetail />} // 문제 코드
]
}
])
root.render(
<RouterProvider router={router} />
)
App.js 에는 Outlet으로 받았습니다.
형태로 라우터를 쓰면 주소창에 videos/watch/아무문자 로 입력하면 VideoDetail 페이지가 나오는데
--------------------------------------------------------------
두번째 방법으로
index.js에
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
)
App.js에
<Routes>
<Route path="/" element={ <Videos /> }>
<Route path="videos" element={ <Videos /> } />
<Route path="videos/:keyword" element={ <Videos /> } />
<Route path="videos/watch/:asd" element={ <VideosDetail /> } />
</Route>
<Route path="*" element={ <NotFound /> } />
</Routes>
형태로 라우터를 써서 주소창에 videos/watch/아무문자로 입력하면 Videos 페이지만 나옵니다.
첫번째 형태로 하면 파람을 따로 지정 안 해도 되는건가요?..
