How is nested routing supposed to work?

[akloster]

This may be a stupid question, but I'm not quite clear on how nested routing is supposed to work. Do I need to have new Router element? Do I need to create another "new ReactLocation()"? It's not quite obvious to me from the examples...

[aust1nz]

Based on my reading, you're not supposed to create nested Routes in react-location. There's a reference to this on the Router API docs:

The Router component is the root Provider component for the react-location instance and your route configuration in your app. Render it only once (rendering multiple routers is an anti-pattern, and straight-up not supported for good reason).

React-Router does accomplish nesting through children (and children with children!) But it means you'll need to configure all of your routes in one place ultimately (even if you import an array of child routes.)

[SandipNirmal]

Does it mean using React-Location in monorepo setup is not possible?

Suppose I've couple of modules like Dashboard, Settings which has its own nested routes say settings/timezone. Is there no way I can do it without defining settings/timezone inside single routes config. If I want to use it in following way.

Ex.
Dashboard package

{
path: "",
  children: [
    {
      path: "/",
      element: <Dashboard />
    },
    {
      path: "test",
      element: <h1>Test</h1>
    }
  ]
}

Settings Package

{
path: "",
  children: [
    {
      path: "/",
      element: <Settings />
    },
    {
      path: "timezone",
      element: <TimezoneSettings />
    }
  ]
}

App

{
path: "",
  children: [
    {
      path: "/dashboard",
      element: <DashboardPackage />
    },
    {
      path: "/settings",
      element: <SettingsPackage />
    }
  ]
}

Something like: https://codesandbox.io/s/cool-rui-b75fr?

@tannerlinsley

[SandipNirmal]

Hi @tannerlinsley,

How to make this work?

[vijaypushkin]

Nesting works in react-location!

You have configure all your routes in a single file though and just one ReactLocation is enough

<Router 
  location={location}
  routes={[
    { 
      path: '/home', 
      element: <Home />,
      children: [
         {
           path: '/', 
           element: <HomeChild />,
         },
         {
           path: '/page2', 
           element: <PageTwo />,
         },
       ],
     }
   ]}
  />

// Home

return (
  <div>
     <h2>Home</h2>
     <Outlet />
  </div>
  )

Children will be rendered in Outlet

[wenerme]

For me, nested router means create two different location.

Using shared history works for me though,

• Router,hash history
  • provide history in context
    • Router, useHistory, setup basename

the nested router like this

export const ApplicationContent: React.FC = () => {
  const history = useHistory();
  const location = useMemo(() => {
    return new ReactLocation<LocationGenerics>({
      history: history ?? createHashHistory(),
    });
  }, []);
  return (
    <ContainerPortalProvider>
      <Router<LocationGenerics>
        filterRoutes={rankRoutes}
        basepath={'/test/file'}
        location={location}
        useErrorBoundary={true}
        routes={routes}
      >
        <ApplicationLayout sidebar={<Sidebar />}>
          <Outlet />
        </ApplicationLayout>
      </Router>
    </ContainerPortalProvider>
  );
};

[tannerlinsley]

Routes are just JavaScript objects, so you can import them and compose them as you would normally. Tanner Linsley

…

On Dec 24, 2021, 9:49 AM -0700, Sandip Nirmal ***@***.***>, wrote: Does it mean using React-Location in monorepo setup is not possible? Suppose I've couple of modules like Dashboard, Settings which has its own nested routes say settings/timezone. Is there no way I can do it without defining settings/timezone inside single routes config. If I want to use it in following way. Ex. Dashboard package { path: "", children: [ { path: "/", element: <Dashboard /> }, { path: "test", element: <h1>Test</h1> } ] } Settings Package { path: "", children: [ { path: "/", element: <Settings /> }, { path: "timezone", element: <TimezoneSettings /> } ] } App { path: "", children: [ { path: "/dashboard", element: <DashboardPackage /> }, { path: "/settings", element: <SettingsPackage /> } ] } — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[akloster]

I appreciate the answers, but this wasn't quite what I was looking for. Nested routing to me is not about composing routes from different files/modules. That is pretty easy, as it is just a javascript structure.

A basic example would be a blog page where there is some content staying the same and some content (list of posts, post content) displayed depending on the routes). In react-router you can have a switching component on that blog page reacting to the route.

In react-router the way I see it you'd have to either declare matching routes to components for the different cases or somehow integrate the switching logic into the matched component, right?

I feel like the examples try to do something like that, but I think I'm not fully understanding it.

[Jared-Dahlke]

i just ended up refactoring my repo so that i could put all the routes in one array

[wenerme]

@akloster newer react-router forbid(throw exception) nested router, react-location at least allowed nested.

https://github.com/remix-run/react-router/blob/7e6d6e8a463d1d5ec650cb24d3c20b1926345da5/packages/react-router/index.tsx#L263-L267

[cyrilgeorgemv]

Was trying out the library and came to the same problem. I get the idea of exporting a Route[] from each module but that will not work when it comes to code splitting since import option doesn't have children property or am I missing something.