React-router - NotFound (Switch)

ReactJS - NotFound (Switch)

react-router v4 version4

sorce code는 이전 문서에서 재활용한다.

/...../ 는 생략되었다는 표시임

파란 글씨는 추가된 것임

빨간 글씨는 수정된 것임

요청하는 페이지가 존재하지 않을 경우 보여질 페이지 Switch문은 차례대로 비교하여 최종적으로 찾는 페이지가 없을 경우 NotFound 페이지를 보여줌.

~cra-router/src/routes$ NotFound.js

import React from 'react';

const NotFound = () => {

    return (

        <div>

            존재하지 않는 페이지입니다.<br />

            <h1>404</h1>

        </div>

    );

};

export default NotFound;

~cra-router/src/ App.js

import React  from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './routes/Home';

import About from './routes/About';

import Posts from './routes/Posts';

import Login from './routes/Login';

import MyPage from './routes/MyPage';

import Search from './routes/Search';

import NotFound from './routes/NotFound';

import Header from './components/Header';

const App = () => {

    return (

            <Router>

                <div>

                    <Header />

                    <div>

                        <Switch>

                            <Route exact path='/' component={Home} />

                            <Route path='/about/:username' component={About} />

                            <Route path='/posts'  component={Posts} />

                            <Route path='/login'  component={Login} />

                            <Route path='/mypage'  component={MyPage} />

                            <Route path='/search'  component={Search} />

                            <Route component={NotFound} />

                        </Switch>

                    </div>

                </div>

            </Router>

    )

}

export default App;