Reactのルーティング メモ

Reactでページを追加する手順

1.routes/index.jsにルーティングの追加

export default {
  top: () => '/',
  signIn: () => '/sign_in',
  signUp: () => '/sign_up',
}

2.containers/以下にページようファイルを作成

3.routes/Router.jsにページをインポートしてルーティング作成

import React from 'react'
import { ConnectedRouter } from 'connected-react-router'
import { Route, Switch } from 'react-router-dom'
import routes from '../routes'
import requireAuth from '../components/requireAuth'
import { withGuestLayout, withMemberLayout } from '../components/Layouts/RouteWithLayout'
import TopPage from '../containers/TopPage'
import SignInPage from '../containers/SignInPage'
import SignUpPage from '../containers/SignUpPage'

export default ({ history }) => (
  <ConnectedRouter history={history}>
    <Switch>
      <Route exact path={routes.top()} render={withGuestLayout(TopPage)} />
      <Route exact path={routes.signIn()} render={withGuestLayout(SignInPage)} />
      <Route exact path={routes.signUp()} render={withGuestLayout(SignUpPage)} />
    </Switch>
  </ConnectedRouter>
)