Exclusive matching

[aaronshaf]

"React Router lets you match in multiple places on purpose" (https://react-router.now.sh/ambiguous-matches)

For simplicity it'd be nice to have an exclusive property:

<Match exclusive exactly pattern="/about" component={About}/>

This would simplify use of Match/Miss. It could be exclusive relative to its Match siblings.

[Ciantic]

Also, because there is no way to define exclusivity, one has to trick the MainApp using Miss:

const NoMatch = ({ location }) => (
    <div>
        <h2>Whoops</h2>
        <p>Sorry but {location} didn’t match any pages</p>
    </div>
)

const MainApp = () => (
    <div>
        <h2>Main App</h2>
        <Match exactly pattern="/About" component={About} />
        <Miss component={NoMatch} /> 
    </div>
)

class App extends React.Component<any, any> {
    render() {
        return <HashRouter>
            <div>
                <Match pattern="/OtherApp" component={OtherApp} />
                <Match pattern="/YetAnotherAppf" component={YetAnotherAppf} />
                <Miss component={MainApp} />
            </div>
            </HashRouter>;
    }
}

And even in my example, the NoMatch does not work because two Miss can't be inside each other, I think.

[aaronshaf]

Here is a (fledging, incipient) proof of concept:

https://react-middle-router.now.sh/

[ryanflorence]

@Ciantic you want <Match pattern="/" exactly component={MainApp}/> not <Miss>.

[kwelch]

@ryanflorence That would breaking nesting within MainApp, if there was nesting there that is different from the Matches at the app level. I have a similar example trying to get it into text.

[ryanflorence]

Let's keep @Ciantic's conversation over on #4016

@aaronshaf I'm not totally understanding what exclusive does, can you explain it some more?

[aaronshaf]

@ryanflorence exclusive says, "if I match, then don't match any of my siblings." See "foo" at the prototype for https://react-middle-router.now.sh/foo

[ryanflorence]

gotcha, that would make things order dependent, I have something I'm still playing with that would probably meet the use-cases you've got (<MatchGroup/>)

[Ciantic]

@ryanflorence hmm, I thought exactly means basically ^/$ in regexp terms.

I mean why would exactly "/" match the "/about"?

That is why I think I need exclusive.

[nick]

I think something akin to 'exclusive' would solve my issue too, as I never want more than Match to apply at once. Like how routes in express stop matching after the first hit.

<Match pattern="/terms" component={Terms} />
<Match pattern="/product/:id" component={ProductDetail} />
<Match pattern="/:country?/:category?" component={ProductList} />

/terms => Terms
/product/prod-id => ProductDetail
/us => ProductList
/us/cats => ProductList
/cats => ProductList
/ => ProductList

Right now, /terms and /product/prod-id also displays the 'ProductList' component

[Ciantic]

Is this now supported? Match was renamed Route, and MatchGroup does not exist anymore. Is exclusivity achieved some other way?

[Ciantic]

Apologies, combing through these various docs, I found MatchGroup is renamed to "Switch"

[mjackson]

Always best to check the docs before commenting on issues, @Ciantic :) Please submit a PR if something's missing! Beta next week! :D

[Ciantic]

Yes I had bookmarked the old docs ( https://react-router.now.sh/ they are not updated anymore ) was scouring those, then the README.