Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Router - are nested <Switch> components an anti-pattern?

From React Router's docs:

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

Nonetheless, nested <Switch> statements are allowed. I use the pattern to break up large numbers of <Routes>:

<Switch>
  <Route path="/foo" component={FooRouter} />
  <Route path="/bar" component={BarRouter} />
  <Route path="/baz" component={BazRouter} />
</Switch>

...

const FooRouter = () => (
  <Switch>
    <Route exact path="/foo/:id" component={ViewFoo} />
    <Route exact path="/foo/new" component={NewFoo} />
  </Switch>
)

const BarRouter = () => (
  <Switch>
    <Route exact path="/bar/new" component={NewBar} />
  </Switch>
)

....

Curious if there is a better method for breaking up large numbers of routes and if nested <Switch> statements should be avoided?

like image 798
cheshireoctopus Avatar asked Apr 02 '18 15:04

cheshireoctopus


People also ask

What are nested routes react router?

In my own words, a nested route is a region within a page layout that responds to route changes. For example, in a single-page application, when navigating from one URL to another, you do not need to render the entire page, but only those regions within the page that are dependent on that URL change.

Can I have nested routes react?

Nested Routes are a powerful feature. While most people think React Router only routes a user from page to page, it also allows one to exchange specific fragments of the view based on the current route.

Which of the following router components are provided by react router library?

The React Router library comprises three packages: react-router, react-router-dom, and react-router-native.


1 Answers

as you solve it just fine when you have a lot of nested route yo can speared them across the app and make a dynamic routes but soon react-router-dom v6 will be release with a huge upgrade one of them is useRoutes that let you configure your routes like this:

let element = useRoutes([
    // A route object has the same properties as a <Route>
    // element. The `children` is just an array of child routes.
    { path: '/', element: <Home /> },
    {
      path: 'users',
      element: <Users />,
      children: [
        { path: '/', element: <UsersIndex /> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

introduction to react-router-dom v6 they have some cool new feature that worth to watch for one of them is the replace of with witch help you a lot with nested routes and fun thing you don't gonna need to use the exact anymore

     <Routes>
        <Route path="/" element={<UsersIndex />} />
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>

this is how it gonna look with the new feature

like image 57
TalOrlanczyk Avatar answered Oct 02 '22 03:10

TalOrlanczyk