Decouple Fragment matching from predefined routes

[andykais]

from what I can see, react-little-router exceeds with little applications. If I am building a larger application I want to organize my routes in a single routes file which includes the components routes are mapped to, or even break up a routes into multiple files.

using your library, I have this helper so I can use a single file for my routes

// createRoutes.js
import React from 'react'
import { RelativeFragment as Fragment } from 'redux-little-router'

export const createRoutes = (routes) => {
  const routesObject = {}
  routes.forEach((routeObj) => {
    routesObject[routeObj.path] = { title: 'placeholder' }
  })
  return routesObject
}

export const createRouteComponents = (routes) => {
  
  const routeComponents = routes.map(route => {
    const RouteComponent = route.component
    return (
      <Fragment key={route.path} forRoute={route.path}>
        <RouteComponent/>
      </Fragment>
    )
  })
  return (
    <App>
      { routeComponents }
    </App>
  )
}

// routes.js
import HomePage from 'containers/HomePage'
import ErrorPage from 'containers/ErrorPage'

export default [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/error',
    component: ErrorPage
  }
]

// index.js
const RouteFragments = createRouteComponents(routes)
const RouteObject = createRoutes(routes)

const renderComponent = () => (
  <RouterProvider store={store}>
    { RouteFragments }
  </RouterProvider>
)

ReactDOM.render(
  renderComponent(),
  root
)

would you consider including something like this? Something where routes dont need to be defined in both a routes object and in each Fragment? It makes a react-router app much easier to reason about. If that same logic can be applied without react-router that would be awesome!

[tptee]

Been thinking about this for a while–I think we can make this happen in a minor release soon 👍

[tptee]

Check out #189 – Fragment matching is decoupled from static routes. Even better, you can just ditch static routes altogether if you don't want/need them!

[tptee]

This is done in v14.0.0-0