`forRoute="/"` renders if route contains "/"

[haf]

Not just if it is only "/". It seems it's doing prefix-matching, but it should not match if you e.g. have

div
  fragment forRoute=/accounts
  fragment forRoute=/

Then both will render.

[spmebrge]

@haf Do you have the format of capital Fragment and the routes in ticks? Perhaps it is an issue in how you are formatting the fragment? \<Fragment forRoute='/'>

[baebb]

@haf can you share your routes.js and fragment set up if the above didn't fix?

[haf]

@spmebrge Yes, that's what it looks like. I'll share them shortly.

[monicao]

I ran into this as well, although I might be doing something wrong in the config.

Here's some code to illustrate the issue. The README has more details. https://github.com/monicao/redux-little-router-question/tree/master

Btw, really love how clean the redux-little-router architectural pattern feels!

[baebb]

@monicao @haf have you set up a parent wrapping route like this example?

      <Fragment forRoute='/'>
        <div className="App">
          <h1 className="text-center">react-redux-boiler</h1>
          <Fragment forRoute='/'><Home /></Fragment>
          <Fragment forRoute='/about'><About /></Fragment>
          <Fragment forRoute='/query'><Query /></Fragment>
          <Fragment forNoMatch>
            <h2 className="text-center">404</h2>
          </Fragment>
        </div>
      </Fragment>

[haf]

@justrossthings Yes, the fragments seem to be order-dependent, like your example shows. It'll render the first match there.

[monicao]

@justrossthings Thanks, that fixed the / and /foo routes in the example, but the /foo/bar still shows 'Foo' on the page.

Here is the relevant code:

      <Fragment forRoute='/'>
        <div>
          <Fragment forRoute='/'>
            <div>Home</div>
          </Fragment>
          <Fragment forRoute='/foo'>
            <div>Foo</div>
          </Fragment>
          <Fragment forRoute='/foo/bar'>
            <div>Bar</div>
          </Fragment>
          <pre style={{whiteSpace: 'pre-wrap'}}>
            {JSON.stringify(this.props.router)}
          </pre>
        </div>
      </Fragment>

I tried nesting the '/foo/bar' fragment inside a parent '/foo' fragment but that did not do it.

Using redux-little-router: v14.2.0

[baebb]

@haf thanks for that find!

@monicao can you try switching the order for the /foo/bar fragment to be before the /foo fragment

[monicao]

@justrossthings Ahh thanks that worked!

It might be worth providing an example to document this in the README. I'd be happy to put something together.

[haf]

@monicao It would be great to have this documented :)

[baebb]

@monicao a small PR would be appreciated :)

@haf if this is all sorted can u close?