Using an exact path for a Fragment

[jsonmaur]

If I define <Fragment forRoute='/hello'>, it will match /hello but also /hellooooo. I'm not sure if that's intended behavior or a bug, but I don't see why anyone would want it to work like that. Is there a way to make the route match exactly without having to write a custom withConditions function? Might be useful to add a forExactRoute or something like <Fragment exact forRoute='/hello'> like they do in react-router.

[davidspiess]

Also interested in that!

[jmike]

Bummer. Stumbled upon the same problem 20 mins after installing redux-little-router.

[nruhe]

This should be the default functionality. Rarely do I find myself needing to do a partial url match.

[RussianCow]

In case someone else stumbles upon this issue looking for a solution, I thought I would share mine:

// Define this helper function somewhere
const isExactMatch = route => location => location.route === route
// Then later:
<Fragment withConditions={isExactMatch(someRoute)}>...</Fragment>

Basically, use withConditions to test the route directly. It's not super pretty, but does the job.

[threehams]

In case anyone's looking for a quick and dirty "exact by default, optional partial" component:

import React from "react";
import { Fragment as OriginalFragment } from "redux-little-router";

export const Fragment = ({ partial, forRoute, ...rest }) => {
  let props;
  if (!partial) {
    props = { withConditions: location => location.pathname === forRoute };
  } else {
    props = { forRoute };
  }

  return <OriginalFragment {...props} {...rest} />;
};

Note that you can't use forRoute, withConditions, and partial all together with this (though I don't know why you'd want to).