React Router full page for nested route

Question

Using React-Router is there a way manage nested routes that overlay on top of the original route navigation?

I went through the react-router documentation but had trouble finding an example where the original navigation links were removed or hidden on the page.

I'm looking for an example like the below image:

I'm trying to have each tab in the above image be represented by a unique route, and then when a user clicks on an element under a tab, the element's detailed view would show overtop the entire page beneath the app's header. To me, a nested route seems to make sense in this scenario, however, the nested route puts the detailed component beneath the tabbed component. Which is not the user experience I'm looking for.

The routes that I believe make sense given the above would be something like:

Tabs:
/overview/tab1
/overview/tab2
/overview/tab3

Detailed View of Elements:
/overview/tab1/elements/:elementNumber

I was able to achieve this using the following:

export function Navigation() {
  return (
    <div>
      <Switch>
        <Route path="/tabs">
          <TabbedNavigation />
        </Route>
        <Route path="/details">
          <DetailedNavigation />
        </Route>
      </Switch>
    </div>
  );
}

export function TabbedNavigation() {
  return (
    <>
      <Switch>
        <Route path="/tabs/tab1">
          <Tab1 />
        </Route>
        <Route path="/tabs/tab2">
          <Tab2 />
        </Route>
        <Route path="/tabs/tab3">
          <Tab3 />
        </Route>
      </Switch>
    </>
  );
}

export function DetailedNavigation() {
  return (
    <>
      <Switch>
        <Route path="/details/elements/:elementNumber">
          <ElementDetails />
        </Route>
      </Switch>
    </>
  );
}

The above works fine, and provides the user experience I'm looking to achieve, but I feel like there has to be a better way to achieve the same using the react-router api.

Is it possible to have overplayed routes using react-router?

Why don't you just use absolute or fixed for the CSS position of the DetailedNavigation component and have a margin-top equal to your application header? — foxtrotuniform6969
– foxtrotuniform6969, Commented Jun 25, 2021 at 14:50
@foxtrotuniform6969, I'm sorry but not following the suggestion. I understand setting the position attribute, but setting the margin-top to equal the application header I'm a bit lost on. Are you saying to set the margin-top to equal the height of the header? What happens if the height of the header is dynamic and could change based on content? — FlatPenguin
– FlatPenguin, Commented Jun 25, 2021 at 23:21
Hey @FlatPenguin, did my answer work for you? I could try another approach if it didn't — diedu
– diedu, Commented Jun 29, 2021 at 5:14

diedu · Accepted Answer · 2021-06-26 05:43:09Z

1

You can achieve that with CSS, set the green container with a position: "relative" style, and the detail view with position: "absolute" and left, right, top, bottom to 0. With this, the details view will cover all other contents of the green container since it gets positioned relative to its closest positioned ancestor (the first ancestor with a position attr)

<GreenContainer style={{ position: "relative" }}>
...
   <DetailsView 
      style={{
        position: "absolute",
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
      }}
   >
   ...

Here is a codesandbox I set up with the example of nested routes provided in the react-router documentation

https://codesandbox.io/s/react-router-typescript-demo-forked-n0woz?file=/src/example.tsx

note: I'm assuming the green container is a sibling of the header

edited Jun 26, 2021 at 5:43

answered Jun 26, 2021 at 5:37

diedu

20.9k4 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meera Datey · Accepted Answer · 2021-07-02 07:00:10Z

You need to wrap the elements that needs to be overwritten within switch

const TabMenu = () => (

  <div >
  <Link to="/tabs/tab1">Tab1</Link> <span>  </span>
  <Link to="/tabs/tab2">Tab2</Link> <span>  </span>
  <Link  to="/tabs/tab3">Tab3</Link>
  </div>)

export function Navigation() {
  return (
    <div>
    <Switch>
      <Route path="/tabs">
        <TabMenu/>
        <TabbedNavigation />
      </Route>
      <Route path="/details/elements/:elementNumber">
        <DetailedNavigation />
      </Route>
    </Switch>
  </div>
  );
}

Because the TabMenu are inside Switch element, it will get replaced with Detailed View.

Here is working code example

https://codesandbox.io/s/react-router-full-page-for-nested-route-s15rx?file=/src/App.js

chiri · Accepted Answer · 2023-03-22 18:09:31Z

0

Using the Outlet component from react-router-dom might be the way to go. You can easily render the <Outlet /> component in the parent in the place you want.

In the case of the element detail, you could do something like:

function Parent() {
  const location = useLocation()
  if (location.pathname === childPath) return <Outlet />

  return ( 
     <ParentRenderStuff />
  )
}

answered Mar 22, 2023 at 18:09

chiri

1631 silver badge6 bronze badges

Collectives™ on Stack Overflow

React Router full page for nested route

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related