Set react-router-dom to gh-pages site

why

作っている私自身の HP に複数ページが欲しい

前回作った電気屋のサイトでは

index - App (HOME) - Works
                   - Shops
                   - News
                   .....

という構成だった。

今回は index から直接分岐して

import React ,{ Suspense }from 'react';
import { BrowserRouter as Router, Route, Switch, } from 'react-router-dom';
import routes from './routes';

function App() {

let loading = () => <div>Loading...</div>

  return (
    <Container className=''>
      <Header />
      <Row className='leftside'>
        <Router>
        <Suspense fallback={loading}>
        <Switch>
         {
          routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              name={route.name}
              render={props => 
                (<route.component {...props} />)}
            />
          ))
         }
         <Route render={() => <h1>not found!.</h1>} />
        </Switch>
        </Suspense>
        </Router>
      </Row>
      <Footer />
    </Container>
  );
}
export default App;

この App.js と

import React from 'react';

const Home = React.lazy( () => 
  import('./containers/Home')
);
const Works = React.lazy( () => 
  import('./containers/Works')
);
const News = React.lazy( () => 
  import('./containers/News')
);


const Parts = React.lazy( () => 
  import('./containers/Parts')
);
const Airs = React.lazy( () => 
  import('./containers/Airs')
);
const Links = React.lazy( () => 
  import('./containers/Links')
);

const routes = [
  {path: '/', exact: true, name: 'Home', 
    component: Home},
  {path: '/works', exact: true, name: 'Works', 
    component: Works},
  {path: '/shops', exact: true, name: 'Shops', 
    component: Home},
  {path: '/news', exact: true, name: 'NewInfo', 
    component: News},

  {path: '/parts', exact: true, name: 'Parts', 
    component: Parts},
  {path: '/airs', exact: true, name: 'Airs', 
    component: Airs},
  {path: '/links', exact: true, name: 'Links', 
    component: Links},

]
export default routes;

routes.js を...

は？こんなめんどくさいことやってたの私

Next.js とかなら pages/ に書けば直接読み込んでくれるし、

よくあるポートフォリオは実際は 1 page でリンクは id のとこに飛ばしてるだけだし

今回はやめた！！！！！

ただNext.jsの勉強ログを見ると

f:id:kei_s_lifehack:20200830184332j:plain