리액트 404 Not found page 처리하기

리액트에서 404 not found를 처리하는 방버을 알아보자

 

1. Not found 컴포넌트를 작성한다.

2. <Route>를 설정한다.

3. 없는 url을 호출한다.

 

1. Not found 컴포넌트를 작성한다.

import {Container} from "react-bootstrap";

const NotFound = () => {
    return (
        <Container className={"text-center"} fluid>
        <h1>404 not found</h1>
        </Container>
    )
}

export default NotFound;

2. app.js에 <Route>를 설정한다.

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

import './App.css';
import Signin from "./signin/Signin";
import Signup from "./signin/Signup";
import NotFound from "./error/NotFound";
import Home from "./Home";

function App() {
  return (
      <Router>
        <Switch>
          <Route exact path={"/signin"} component={Signin}/>
          <Route exact path={"/signup"} component={Signup}/>
          <Route exact path={"/"} component={Home}/>
          <Route path={"*"} component={NotFound}/>
        </Switch>
      </Router>
  );
}

export default App;

3. 없는 url을 호출한다.

http://localhost:3000/aaa