[Front End] Creating a 404 page

404 페이지 지정.

이번에는 잘못된 URL로 접속했을경우 페이지를 찾을수 없다는 메세지를 내도록 하겠습니다.

 

NotFoundPage.js

const NotFoundPage = () => (
    <>
        <h1>404: Page Not Found! </h1>
        <h1>404: 페이지를 찾을수 없습니다! </h1>
    </>
);

export default NotFoundPage;

 

App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import NavBar from './NavBar';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import AriclesListPage from './pages/ArticlesListPage';
import AriclePage from './pages/ArticlePage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <NavBar />
        <div id="page-body">
          <Routes>
            <Route path='/' element={<HomePage />} />
            <Route path='/about' element={<AboutPage />} />
            <Route path='/articles' element={<AriclesListPage />} />
            <Route path='/articles/:articleId' element={<AriclePage />} />
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

ArticlePage.js

import { useParams } from 'react-router-dom';
import NotFoundPage from './NotFoundPage';
import articles from './article-content';

const ArticlePage = () => {
    const { articleId } = useParams();
    const article = articles.find(article => article.name === articleId);

    if (!article) {
        return <NotFoundPage />
    }

    return (
        <>
            <h1>{article.title}</h1>
            {article.content.map((paragraph, i) => (
                <p key={i}>{paragraph}</p>
            ))}
        </>
    );
}

export default ArticlePage;

 

결과 화면은 다음과 같습니다.

 

그리고 블로그를 완성하기 위해 HomePage.js와 AboutPage.js를 원하는 내용으로 채워줍니다.

HomePage.js

const HomePage = () => (
    <>
        <h1>Hello, welcome to my blog!</h1>
        <p>
            Welcome to my blog! This is a blog created by Full Stack to show you how front end, back end and database are used. There's nothing, I just put anything in. You don't have to read it carefully.
        </p>
        <p>
            이 블로그에 오신 것을 환영합니다! 이 블로그는 Full Stack 개발을 통해 Front End 와 Back End 그리고 데이터베이스가 어떻게 사용되어지는 보여주기위해 만들어진 블로그 입니다. 내용은 아무것도 없고 아무 내용이나 막 넣었습니다. 자세히 읽으실 필요도 없습니다.
        </p>
        <p>
            このブログへようこそ！ このブログは、Full Stack開発を通じてFront EndとBack End、そしてデータベースがどのように使われるかを示すために作られたブログです。 内容は何もなく、適当に入れました。 詳しく読む必要もありません。
        </p>
    </>
);

export default HomePage;

 

AboutPage.js

const AboutPage = () => {
    return (
        <>
            <h1>About Me</h1>
            <p>
                Welcome to my blog! This is a blog created by Full Stack to show you how front end, back end and database are used. There's nothing, I just put anything in. You don't have to read it carefully.
            </p>
            <p>
                이 블로그에 오신 것을 환영합니다! 이 블로그는 Full Stack 개발을 통해 Front End 와 Back End 그리고 데이터베이스가 어떻게 사용되어지는 보여주기위해 만들어진 블로그 입니다. 내용은 아무것도 없고 아무 내용이나 막 넣었습니다. 자세히 읽으실 필요도 없습니다.
            </p>
            <p>
                このブログへようこそ！ このブログは、Full Stack開発を通じてFront EndとBack End、そしてデータベースがどのように使われるかを示すために作られたブログです。 内容は何もなく、適当に入れました。 詳しく読む必要もありません。
            </p>
        </>

    )
}

export default AboutPage;

 

지금까지 완성된 블로그 화면입니다.