Reactで404画面を作成する（TypeScript）

ルーティング

src/index.tsx

import { AuthProvider } from 'providers/AuthProvider'
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import Login from 'template/Login'
import NotFound from 'template/NotFound'
import User from 'template/User'

ReactDOM.render(<App />, document.getElementById('root'))

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/login' component={() => <Login />} exact />
         <AuthProvider> // これは自作の認証プロバイダ
          <Switch>
            <Route path={getUserPathList()} component={() => <User />} />
            <Route component={() => <NotFound />} />
          </Switch>
        </AuthProvider>
      </Switch>
    </BrowserRouter>
  )
}

const getUserPathList = (): string[] => [
  '/home',
  '/setting',
]

これで、下記ルート以外にアクセスされた場合、NotFoundコンポーネントが描画されます。

/login
/home
/setting

NotFoundコンポーネントを作成

src/template/NotFound.tsx

import React from 'react'
import { Card, CardBody, Col, Container, Row } from 'reactstrap'
import { Link } from 'react-router-dom'

const NotFound: React.FC = () => {
  return (
    <div className="main-content">
      <div className="header py-7 py-lg-8" />
      <Container className="mt--8 pb-5">
        <Row className="justify-content-center">
          <Col lg="8" md="8">
	    <p>404エラー</p>
            <Card className="bg-secondary shadow border-0">
              <CardBody className="px-lg-5 py-lg-5">
                <p>お探しのページは見つかりませんでした。</p>
                <Link to='/login'>ログイン画面へ</Link>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </Container>
    </div>
  )
}

export default NotFound