React : createBrowserRouter 을 통해 Router을 만들어보자.

 

index .js

import { createBrowserRouter } from 'react-router-dom';
import { NotFound } from './page/NotFound';
import { Videos } from './page/Videos';
import { VideoDetail } from './page/VideoDetail';

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/:videoId' , element: <VideoDetail/>},
    ]
  }
])

 

1. const router을 통해  createBrowserRouter을 만든다. 

2. 그안에는 ( [ { } ] ) 이런식으로 되어있다.

3. 첫번째 객체 안에는 최상단의 위치인 <App/>을 넣어준다.

4. 에러가 나면 NotFound라는 페이지로 가게 컴포넌트를 만든다.

5. children 이라는 자식안에 또 [ ] 배열안에  { }객체를 넣어준다.

6. 그안에는 내가 만들고 싶은 페이지들을 넣는다.

7. index가 true면 Videos라는 메인 페이지

8. 경로가  videos여도 Videos 페이지

9. videos에 키워드를 입력하면 그 키워드에 맞는 Vidoes 페이지

10. videos/watch/:videoId 즉 비디오의 ID값이 들어간 애를 클릭하면 VideoDetail 페이지가 나오게 설정을 해둔다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

 

1. RouterProvider 을 사용함으로써 위에서 지정해준 애들 ( router) 을 프롭스로 보내준다.

2. 우산을 씌워주는 작업 

 

 

<App.js > 에서 마지막 작업을 해줍니다.

import {Outlet} from 'react-router-dom'
import './App.css';

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

export default App;

 

1. APP 에서 자식요소들을 보여줄 수 있도록 Outlet  이라는걸 씁니다.

2. outleft은 react-router-dom에서 가져올 수 있게 import 해줍니다.

 

이렇게 url에 검색조건을 쓰면 잘나오는걸 확인할 수 있습니다.