115日目：最後の修正：Page Not Foundの作成とRoutesのみファイルをわける

2019年08月02日 2019年08月02日

キョウコ

ひと通りコードを書き終わったUdemy講座Mern Stack Front to End (講師:Brad Traversy)ですが、講座終了後に任意でさらに機能追加できるようになっていましたので、その部分のコーディングを行いました。1つ目は新規ページ"Page Not Found"の新規ファイル作成、そして２つ目はRoutes.jsファイルを新規作成してトップのLandingページにPage Not Foundが表示されないようにファイルをわける（App.jsもスッキリさせる）、ということです。

【私も学習中のUdemy講座の公式HPはこちら⇒】世界最大級のオンライン学習サイトUdemy

①NotFound.jsの作成 src/components/layout/NotFound.js

作成したWebアプリケーションdevconnectorで作成した以外のページurlを閲覧者が指定した場合に”Page Not Found"と表示されるようにしました。

例えば、/test や /page など、用意されていないurlを指定された場合に"Page Not Found"と表示されます。

ソースコードは超々シンプルです。

import React, { Fragment } from "react";

const NotFound = () => {
  return (
    <Fragment>
      <h1 className='x-large text-primary'>
        <i className='fas fa-exclamation-triangle' /> Page Not Found
      </h1>
      <p className='large'>Sorry, this page does not exist</p>
    </Fragment>
  );
};

export default NotFound;

②App.jsの修正
トップのLandingページに"Page Not Found"が表示されないようにする

最初から書き続けてきたApp.jsが長くなり、現在使用しているテンプレートだと”Page Not Found"がトップのLandingページをスクロールしたところに表示されてしまうためエラー修正しました。

このエラーを修正するため、Switch内に沢山あったRouteやPrivate Route、そしてimportしていたcomponentsを別ファイルに移動させました。

新規作成した別ファイルはcomponents/routing/Routes.jsです。（コードについては後ほど詳しく記述）

というわけで、App.js自体はとてもシンプルになりました。

importしていた沢山のcomponentsや、Switch内のRouteやPrivate Routeがなくなった（移動させた）かわりに、新規作成したRoutes.jsの情報を取り込みました。

import React, { Fragment, useEffect } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Routes from "./components/routing/Routes";

//Redux

import { Provider } from "react-redux";
import store from "./store";
import { loadUser } from "./actions/auth";
import setAuthToken from "./utils/setAuthToken";

import "./App.css";

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Navbar />
          <Switch>
            <Route exact path='/' component={Landing} />
            <Route component={Routes} />
          </Switch>
        </Fragment>
      </Router>
    </Provider>
  );
};

export default App;

③components・Route・Private RouteをまとめておくRoutes.jsを新規作成
client/src/components/routing/Routes.js

App.jsにあったほとんどのcomponentsとRoute、そしてPrivate RouteをまとめておくためのファイルRoutes.jsを作成しました。

Reactの基本形のファイルを作成し、RouteとSwitchをインポート、後はApp.jsにあったcomponentsファイルやRouteを移動させています。

ファイルをわけたことで、Landingページのエラーがなくなり、App.jsもシンプルになり、Routesの管理もしやすくなったと思います。

import React from "react";
import { Route, Switch } from "react-router-dom";

import Register from "../auth/Register";
import Login from "../auth/Login";
import Alert from "../layout/Alert";
import Dashboard from "../dashboard/Dashboard";
import CreateProfile from "../profile-form/CreateProfile";
import EditProfile from "../profile-form/EditProfile";
import AddExperience from "../profile-form/AddExperience";
import AddEducation from "../profile-form/AddEducation";
import Profiles from "../profiles/Profiles";
import Profile from "../profile/Profile";
import Posts from "../posts/Posts";
import Post from "../post/Post";
import NotFound from "../layout/NotFound";
import PrivateRoute from "../routing/PrivateRoute";

const Routes = () => {
  return (
    <section className='container'>
      <Alert />
      <Switch>
        <Route exact path='/register' component={Register} />
        <Route exact path='/login' component={Login} />
        <Route exact path='/profiles' component={Profiles} />
        <Route exact path='/profile/:id' component={Profile} />
        <PrivateRoute exact path='/dashboard' component={Dashboard} />
        <PrivateRoute exact path='/create-profile' component={CreateProfile} />
        <PrivateRoute exact path='/edit-profile' component={EditProfile} />
        <PrivateRoute exact path='/add-experience' component={AddExperience} />
        <PrivateRoute exact path='/add-education' component={AddEducation} />
        <PrivateRoute exact path='/posts' component={Posts} />
        <PrivateRoute exact path='/posts/:id' component={Post} />
        <Route component={NotFound} />
      </Switch>
    </section>
  );
};

export default Routes;