Chicken and Egg situation

[tbowmo]

I'm currently upgrading a large app from react-router 5 to 6, an dhave stumbled uppon a small problem that is bugging me like hell,

I have a main component that renders my entry routes, where I need to extract entity id, and a tabname, the tabname is used in the rendered element, however, the rendered element itself generates the final routes that includes the tabnames. Like the following two pieces of code.

function ProxySomething() {
  const { id, tabName } = useParams<{id: string, tabName: string}>()
  
  return <SomeComponent id={id} tabName={tabName} />
}

function Routes() {
return (
  <Routes>
    <Route path="/app/:id/:tabName?/* element={<ProxySomething />} 
  </Routes>
)
}

function SomeComponent(props: {id: string, tabName: string}) {
  const { id, tabName } = props
  var style = 'normal'
  if (tabName == 'base') {
     style = 'base'
  }

  return (
     <div className={style}>Header</div>

     <Routes>
         <Route path="base" element={<ShowBaseData />} />
         <Route path="advanced" element={<AdvancedUse />} />
     </Routes>
  )

So if I have an url of /app/--some-id--/base then I need to render the ShowBaseData, and still be able to do styling of the initial div,

Basically I want info about the route segments, before I actually define the complete route

Or am I asking for something that is completely undoable?

[tepavcevic]

is something like this helpful

<Routes>
  <Route path="/app/:id/:tabName?" element={<SomeComponent />}>
    <Route path="base" element={<ShowBaseData />} />
    <Route path="advanced" element={<AdvancedUse />} />
  </Route>
</Routes>

function SomeComponent() {
  const { id, tabName } = useParams<{ id: string; tabName?: string }>()
  const style = tabName === 'base' ? 'base' : 'normal'

  return (
    <>
      <div className={style}>Header</div>
      <Outlet />
    </>
  )
}```

[tbowmo]

Wouldn't this be rendering the routes "/app/:id/:tabName/base" ? (I'm on vacation now, so can't test it)

[rossipedia]

matchPath is your friend here. You can match against an arbitrary pattern.

Something like this should do what you're looking for:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="app/:id/*" element={<ProxySomething />} />
      </Routes>
    </BrowserRouter>
  );
}

function ProxySomething() {
  const { pathname } = useLocation();
  const {
    params: { id, tab },
  } = matchPath("/app/:id/:tab", pathname)!;

  return <SomeComponent id={id!} tabName={tab!} />;
}

function SomeComponent(props: { id: string; tabName: string }) {
  const { tabName } = props;
  let style = "normal";
  if (tabName == "base") {
    style = "base";
  }

  return (
    <>
      <div className={style}>Headers</div>
      <Routes>
        <Route path="base" element={<>Base</>} />
        <Route path="advanced" element={<>Advanced</>} />
      </Routes>
    </>
  );
}