영화목록 (Netflix) 앱 11.2 - 404 페이지

 

* 404 페이지 라우터 추가하기

import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Register, Login, Home, Detail, Recommendation, NotFound } from 'pages'

import './index.css'

const App = () => {
    return (
      <div>
        <Routes>
          <Route path='/' element={<Register/>}/>
          <Route path='/login' element={<Login/>}/>
          <Route path='/home' element={<Home/>}/>
          <Route path='/detail' element={<Detail/>}/>
          <Route path='/recommend' element={<Recommendation/>}/>
          <Route path='*' element={<NotFound/>}/>
        </Routes>
      </div>
    );
  };
  
  ReactDOM.render(<BrowserRouter>
                    <App />
                  </BrowserRouter>, document.getElementById("app"));

index.js 파일을 위와 같이 수정하자!

import { Register, Login, Home, Detail, Recommendation, NotFound } from 'pages'

NotFound 페이지 컴포넌트를 추가로 임포트한다.

<Route path='*' element={<NotFound/>}/>

NotFound 페이지에 대한 라우터를 추가한다. path 는 와일드카드(*)로 설정하면 된다.

 

* NotFound 페이지 구현하기

export { default as Register } from './Register'
export { default as Login } from './Login'
export { default as Home } from './Home'
export { default as Detail } from './Detail'
export { default as Recommendation } from './Recommendation'
export { default as NotFound } from './NotFound'

pages > index.js 파일에서 NotFound 컴포넌트를 내보낸다.

import React from 'react'

const NotFound = () => {
    return (
        <div className='NotFound-container'>
            404
        </div>
    )
}
export default NotFound

pages 폴더에 위와 같이 NotFound.js 파일을 추가하자!

import React from 'react'
import notFoundImg from 'assets/images/404.png'

const NotFound = () => {
    return (
        <div className='NotFound-container' style={{width: '100%', height: '100vh'}}>
            <img src={notFoundImg} alt='notfound' width='100%' height='100%'/>
        </div>
    )
}
export default NotFound

NotFound.js 파일을 위와 같이 수정하자! 404 페이지에 대한 이미지 파일을 불러와서 화면에 보여준다.