React-Router-SPA-Netlify - KAEDE Hack blog

Reactは最終的にbundle.jsに全てを襲爵するSingle Page App, SPAである

しかしRouteを使うことによってRequestが来た時に擬似的に複数ページをユーザーに見せることができる．やってみる

why

職場のコーポレートサイト制作での複数ページ導入に．

code

$ npm install -S react-router-dom

www.djamware.com

参考にしてindex.jsで

import { BrowserRouter as Router, Route, Switch, } from 'react-router-dom';
import App from './App';
import Works from './components/Works';
.........
ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/works' component={Works} />
      </div>
  </Router>,
  document.getElementById('root')
);

を埋め込む

そしてWorksを作成し，一部書き換え

<Col className='py-3 bg-secondary'           
  xs={9} >                                   
  電球，蛍光灯，電池交換，テレビ，エアコン， 
</Col>

urlで /works/にアクセスすると表示された！

f:id:kei_s_lifehack:20200514152050p:plain

しかしdeployしたnetlifyではダメだった

tried

とりあえずマッチしなければAppに返すようにSwitchで挟む

そういうわけにはいかない，exactにしてみた．効果はない

大文字にした，効果はない

componentでそのまま渡してるんだから，src/components/Works

からAppと並列のsrc/Worksにする

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

これを追加して，deploy先でRouterが読まれているかのテストとする

動いていない

[https://reacttraining.com/react-router/web/guides/quick-start:embed:cite]

この例を見るとRouteの中にComponentを入れているのでこっちらで試してみる

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>

このやり方ではErrorになったのでぼつ

https://codeburst.io/getting-started-with-react-router-5c978f70df91codeburst.io

このページのやり方

  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>

https://codeburst.io/getting-started-with-react-router-5c978f70df91

もerrorになる

crieit.net

Netlifyがredirectを弾いてるのが原因らしい？