In React Router v6, you can now include a custom parameter in createBrowserRouter

Question

In React Router v6, you can now include a custom parameter in createBrowserRouter

Hey there! I'm currently diving into react router v6 and struggling to add custom params in the route object. Unfortunately, I haven't been able to find any examples of how to do it.

 const AdminRoutes: FunctionComponent = () => {
      const router = createBrowserRouter([
        {
          path: '/',
          element: <Dashboard />,
          permission: ['edit'], //custom param
        },
      ]);
    
          return <RouterProvider router={router} />;
        };
        
  export default AdminRoutes;

Encountered Error -

Type '{ path: string; element: JSX.Element; permission: string[]; }' is not assignable to type 'RouteObject'.
  Object literal may only specify known properties, and 'permission' does not exist in type 'RouteObject'

Your assistance is greatly appreciated.

reactjs typescript react-router react-router-dom

Answer 1

Answer №1

To enhance the traditional RRD approach, I recommend creating a route component that incorporates an additional parameter as a prop and manages the functionality accordingly.

For instance:

const PermissionLayout = ({ permission }) => {
  const hasPermission = ... permission logic ...

  return hasPermission ? <Outlet /> : <Navigate to="/" replace />;
};

const router = createBrowserRouter([
  {
    element: <PermissionLayout permission={['edit']} />
    children: [
      {
        path: "/",
        element: <Dashboard />,
      }
    ],
  },
  ...
]);

const AdminRoutes: FunctionComponent = () => {
  return <RouterProvider router={router} />;
};
        
export default AdminRoutes;

Answer 2

To enhance the traditional RRD approach, I recommend creating a route component that incorporates an additional parameter as a prop and manages the functionality accordingly.

For instance:

const PermissionLayout = ({ permission }) => {
  const hasPermission = ... permission logic ...

  return hasPermission ? <Outlet /> : <Navigate to="/" replace />;
};

const router = createBrowserRouter([
  {
    element: <PermissionLayout permission={['edit']} />
    children: [
      {
        path: "/",
        element: <Dashboard />,
      }
    ],
  },
  ...
]);

const AdminRoutes: FunctionComponent = () => {
  return <RouterProvider router={router} />;
};
        
export default AdminRoutes;

Answer 3

Answer №2

If you wish to utilize this object for various purposes, consider declaring it as a different type that is an extension of RouteObject.

type CustomRouteConfig = RouteObject & { permission: string[] }

const routeConfig: CustomRouteConfig[] = [{
  path: '/',
  element: <Dashboard />,
  permission: ['edit'], //custom param
}];

// Remember not to create the router instance within a function component body.
// It's best to place it in a useEffect hook or make it static instead.
const router = createBrowserRouter(routeConfig);

export const AdminRoutes: FunctionComponent = () => 
  <RouterProvider router={router} />

Answer 4

If you wish to utilize this object for various purposes, consider declaring it as a different type that is an extension of RouteObject.

type CustomRouteConfig = RouteObject & { permission: string[] }

const routeConfig: CustomRouteConfig[] = [{
  path: '/',
  element: <Dashboard />,
  permission: ['edit'], //custom param
}];

// Remember not to create the router instance within a function component body.
// It's best to place it in a useEffect hook or make it static instead.
const router = createBrowserRouter(routeConfig);

export const AdminRoutes: FunctionComponent = () => 
  <RouterProvider router={router} />

Answer 5

Answer №3

import React from 'react';
import i18next from 'i18next';
import '../internationalization/i18next';
import {
  Navigate,
  IndexRouteObject,
  NonIndexRouteObject,
  createBrowserRouter,
} from 'react-router-dom';
import { LayoutAuth } from '../components';
import { SignIn } from '../containers';

type CustomRouteObjectParams = {
    category?: 'authorization' | 'administration';
    title?: string;
};

type CustomIndexRouteObject = IndexRouteObject & CustomRouteObjectParams;

type CustomNonIndexRouteObject = Omit<NonIndexRouteObject, 'children'> &
    CustomRouteObjectParams & {
        children?: (CustomIndexRouteObject | CustomNonIndexRouteObject)[];
    };

type CustomRouteConfig = CustomIndexRouteObject | CustomNonIndexRouteObject;

export const routes: CustomRouteConfig[] = [{
    path: '/auth',
    category: 'authorization',
    title: i18next.t('routes:auth'),
    element: <LayoutAuth />,
    children: [
        {
          index: true,
          element: <Navigate to="signin" />,
        },
        {
          path: '*',
          element: <Navigate to="signin" />,
        },
        {
          path: 'signin',
          title: i18next.t('routes:signin'),
          element: <SignIn />,
        },
      ],
}]

export const router = createBrowserRouter(routes);

export type TRoutes = typeof routes;

Answer 6

import React from 'react';
import i18next from 'i18next';
import '../internationalization/i18next';
import {
  Navigate,
  IndexRouteObject,
  NonIndexRouteObject,
  createBrowserRouter,
} from 'react-router-dom';
import { LayoutAuth } from '../components';
import { SignIn } from '../containers';

type CustomRouteObjectParams = {
    category?: 'authorization' | 'administration';
    title?: string;
};

type CustomIndexRouteObject = IndexRouteObject & CustomRouteObjectParams;

type CustomNonIndexRouteObject = Omit<NonIndexRouteObject, 'children'> &
    CustomRouteObjectParams & {
        children?: (CustomIndexRouteObject | CustomNonIndexRouteObject)[];
    };

type CustomRouteConfig = CustomIndexRouteObject | CustomNonIndexRouteObject;

export const routes: CustomRouteConfig[] = [{
    path: '/auth',
    category: 'authorization',
    title: i18next.t('routes:auth'),
    element: <LayoutAuth />,
    children: [
        {
          index: true,
          element: <Navigate to="signin" />,
        },
        {
          path: '*',
          element: <Navigate to="signin" />,
        },
        {
          path: 'signin',
          title: i18next.t('routes:signin'),
          element: <SignIn />,
        },
      ],
}]

export const router = createBrowserRouter(routes);

export type TRoutes = typeof routes;

In React Router v6, you can now include a custom parameter in createBrowserRouter

Answer №1

Answer №2

Answer №3

Similar questions

Issue with arrow function not being invoked in a React TypeScript component's prop inside a function

Remove the underline from links in gatsbyjs

Error in Ionic Cordova Build prod: Module "." not found - Requires Typescript version >3

React Native ScrollView with a custom footer that adjusts its size based on the content inside (

What is the best way to implement multiple templates for a single component?

Extract CSS from Chrome developer tools and convert it into a JavaScript object

When attempting to access front-end SPA links through the browser, the back-end triggers an error due to not being

Exploring the functionality of window.matchmedia in React while incorporating Typescript

There was an error encountered: TypeError - show.visible cannot be iterated upon. This issue might be related to

Using nested ternary operations in React can cause issues with accessing local variables

Converting a CodePen JavaScript file into a React application involves adapting the code structure to fit the React framework and incorporating necessary dependencies

What is the best way to customize the renderItem method in React Native's SectionList to be based on sections instead of

What is the best way to display the source code of a function in TypeScript?

Angular: Understanding the intricacies of HTTP calls in ngOnInit versus click events (potentially related to caching mechanisms)

Troubleshooting tips for resolving issues when launching Nx React + Express

Restrictions on pairings of kind variables within generic utilization

Out of the blue, the CSS functionality in my React app completely ceased to

What is the solution for resolving the SyntaxError with `...theme.mixins` in your code?

Unable to successfully retrieve a PDF file (stored as binary data) from Mongo-db using React JS technology

The promise chain from the ngbModal.open function is being bypassed