React-starter-kit: Optional parameters routing

[AntonyKwok]

Hi,

I'm a newbie and I have a hard time understanding how to approach optional parameters routing in RSK. I'm sorry if it feels like I just want you to do the work for me but I'm genuinely lost.

I'm following Dan Abramov's course on Redux and I'm at the point where he uses react-router to choose between the different filters in his todo app.

How can I do this with RSK?
Thanks a lot!

Video
Redux: Navigating with React Router

Files:

routes/index.js

export default {

  path: '/',

  // Keep in mind, routes are evaluated in order
  children: [
    require('./todoApp').default,
  ],

  async action({ next }) {
    // Execute each child route until one of them return the result
    const route = await next();

    // Provide default values for title, description etc.
    route.title = `${route.title || 'Untitled Page'}`;
    route.description = route.description || '';

    return route;
  },

};

routes/todoApp/index.js

import React from 'react';
import TodoApp from './TodoApp';

export default {

  path: '/',

  async action() {
    return {
      title: 'Todo App',
      component: <TodoApp />,
    };
  },

};

Filter.js

import { connect } from 'react-redux';
import FilterLink from '../../components/FilterLink';
import { setVisibilityFilter } from '../../actions/todoActions';

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter,
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  setVisibilityFilter() { dispatch(setVisibilityFilter(ownProps.filter)) },
});

const Filter = connect(mapStateToProps, mapDispatchToProps)(FilterLink);

export default Filter;

FilterLinks.js

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './FilterLinks.css';
import { visibilityFilters } from '../../constants';
import Filter from '../../containers/Filter';

const FilterLinks = () => (
  <div id={s.filterLinks} className="text-right">
    <Filter filter={visibilityFilters.SHOW_ALL}>
      All
    </Filter>
    {' '}
    <Filter filter={visibilityFilters.SHOW_ACTIVE}>
      Active
    </Filter>
    {' '}
    <Filter filter={visibilityFilters.SHOW_COMPLETED}>
      Completed
    </Filter>
  </div>
);

export default withStyles(s)(FilterLinks);

[koistya]

{
  path: '/:filter(active|completed|)',
  action({ params }) {
    return { title: 'My Tasks', component: <Todos filter={params.filter} /> };
  }
}

This route will match either /, /active or /completed URLs; and params.filter variable is going to equal to either null, active or completed.

For more information visit https://github.com/pillarjs/path-to-regexp