In React Router v6, how do I get the route object?

Question

Below, I have a routes object. How do I pull the actual route object for evaluation? I know how to get the pathname. As you can see in my Routes object, I have added some additional information to use in various places. I can iterate the object, but I was hoping for a more built in solution. Another solution is create my own object and supply it to this object, but that feels redundant to me. Thanks in advance.

export const Routes = [
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: '/',
        element: <Home />,
        name: 'Home',
        topBar: false,
      },
      {
        path: 'projects',
        element: <Projects />,
        errorElement: <ErrorPage />,
        name: 'Projects',
        topBar: true,
        children: [
          {
            path: 'bst',
            element: <Bst />,
            name: 'BST Visualizer',
            sideBar: true,
          },
          {
            path: 'knightstour',
            element: <KnightsTour />,
            name: "Knight's Tour",
            sideBar: true,
          },
        ],
      },
      {
        path: 'blog',
        element: <Blog />,
        name: 'Blog',
        topBar: true,
      },
      {
        path: 'contact',
        element: <Contact />,
        name: 'Contact',
        topBar: true,
      },
    ],
  },
]

You'll need to create your own solution if you want to get any extra "data" properties off your routes configuration object. Can you share a [mcve] for what you are trying to accomplish? From what I can tell you want to conditionally render additional UI elements and for this using [Layout Routes](https://reactrouter.com/en/main/start/concepts#layout-routes) are your friend. — Drew Reese, Sep 23 '22 at 16:48
There is an established way to pass data to routes. I suggest using that rather than rolling your own strategy on top of Router. That risks coupling your business logic to the library too tightly. — isherwood, Sep 23 '22 at 16:49
See [React router, pass data when navigating programmatically?](https://stackoverflow.com/questions/42173786/react-router-pass-data-when-navigating-programmatically) — isherwood, Sep 23 '22 at 17:06
why not using the [loader property](https://reactrouter.com/en/main/route/loader#loader) ? — Olivier Boissé, Sep 23 '22 at 17:11
I see the routes object as just another object. React Router can use parts and I can use other parts. It might be a dumb idea to approach it this way. There are multiple approaches to this problem, it is not to conditionally render so much as a way to use a single object for multiple purposes. And to use the loader property the "object" would still have to be iterated in some manner. I was hoping "useLocation" or some other similar function could return the object being used at that time to render the page. I like the way this new version of React Router works and just wanted to test it out. — Joel Mason, Sep 23 '22 at 17:33

Olivier Boissé · Answer 1 · 2022-09-23T17:36:42.180

0

I would suggest to use the loader function to provide data to the Route element.
With useLoaderData, you will be able to retrieve the data.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    loader: () => ({
      name: "Home", 
      topBar: true
    })
  },
  ...
]);

function Home() {
  const { name, topBar } = useLoaderData();
  return <p>Name = {name}</p>;
}

Here is an example on Stackblitz

edited Sep 23 '22 at 17:36

answered Sep 23 '22 at 17:25

Olivier Boissé

15,834
6
38
56

Since these are static values wouldn't it make more sense just to pass props, i.e. `element: ,` and destructure `function Home({ name, topBar }) { ....`? It's certainly less moving parts than using the new data APIs. ‍♂️ – Drew Reese Sep 25 '22 at 08:20
yes of course you can declare the element with props instead of using the loader – Olivier Boissé Sep 26 '22 at 07:43

In React Router v6, how do I get the route object?

1 Answers1