CODEWITHSUNDEEP
reactjsreact-router-v4react-router-dom
Jared
Jared

Reputation: 6080

React Router negate path

I'm using the nested routing functionality of react-router-dom v4 and there is one use case that I haven't found a solution for.

I have two Routes at the root component.

One for almost the entirety of the site and the other for the account section.

I was hoping to be able to do something like... <Route path="/^(account)" ... /> ... or something similar, but I so far have been unable to get that working. Is there a mechanism for this?

EDIT Based on Comment:

The BrowserRouter component has two defined Routes.

/* 
 * Would serve as the root route for all pages that aren't under account. 
 * i.e.
 * /
 * /about
 * /some-section
 */
<Route path="/^(account)" component={SiteLayout} />

/*
 * The other would respond on...
 * /account
 * /account/forgot
 * etc.
 */
<Route path="/account" component={Account} />

Hopefully that demonstrates what I'm looking for a bit more clearly.

Upvotes: 2

Views: 517

Answers (1)

willwoo
willwoo

Reputation: 560

Surely you could just use a catch all for all other routes?

<Router>
    <Switch>
      <Route path="/account" component={Account} />
      <Route component={NotAccount} />
    </Switch>
</Router>

Upvotes: 3

Related Questions