React.js
Pocket

React Routerを使うときにルーティングだけ切り離して管理したいときに便利です。

react-router-config

以下でreact-router-configを追加

yarn add react-router-config

routing.jsみたいなルーティングようのファイルを作って以下を書きます。

import Home from '../components/pages/Home'
import About from '../components/pages/About'

const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
  },
  {
    path: '/about',
    component: About,
  },
]

export default routes

今回は別ファイルで、ルーティングをrenderするようのファイルを作りました。こんな感じで先ほどのroutingをimportして、react-router-configのrenderRoutesを使ってrenderします。

import { renderRoutes } from 'react-router-config'
import routes from '../routing'

const Routes = () => renderRoutes(routes)

export default Routes

あとはこれを最上位のindex.jsで書けばOKです。これが最小の使い方だと思います。

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Routes />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('index')
)
Pocket

Category : Tag :