0

Say I have a lot of routes and I would like to split them up in groups. How would I accomplish this in React with Reach Router?

Example of what I'm basically trying to accomplish:

const Router = () => {
    return (
        <Router>
            <AnonymousRoutes />
            <SecureRoutes />
        </Router>
    );
};

const AnonymousRoutes = () => {
    return (
        <>
            <Page1 path="1" />
            <Page2 path="2" />
        </>
    );
};

const SecureRoutes = () => {
    return (
        <>
            <Page3 path="3" />
            <Page4 path="4" />
        </>
    );
};
Nick Muller
  • 2,003
  • 1
  • 16
  • 43

1 Answers1

1

Edit: So, I based my answer off of a misreading of your problem statement. I thought I read react-router, not reach router. I apologize.

So using a fragment is exactly what you probably SHOULD be doing. However, React Reach doesn't currently support fragments. Silver lining, it looks like it will soon!

https://github.com/reach/router/pull/289

If I'm understanding your question correctly, I think what you're looking for is Switch from react-router.

The switch component allows a developer to segment out their routes and render specific content on the path.

It might look something like this:

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

technicallynick
  • 1,562
  • 8
  • 15
  • Yeah, basically I'm looking for the Switch equivalent in Reach Router. Switch from React Router doesn't work in Reach Router though, so this solution won't work. Edit: Thought about it a bit more, but switch doesn't allow me to group my routes either. That would be a switch that contains switches, which I think is not allowed. – Nick Muller Aug 14 '19 at 14:43
  • My apologies! I misread your problem statement and have updated my answer. – technicallynick Aug 14 '19 at 15:29
  • No need to apologize. Your new answer is exactly what I was looking for. Thanks a bunch! – Nick Muller Aug 14 '19 at 15:31