react-router-dom#useRoutes TypeScript Examples

The following examples show how to use react-router-dom#useRoutes. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AdminRoutes.tsx    From nodestatus with MIT License 9 votes vote down vote up 
AdminRoutes: FC = () => {
  const routes: RouteObject[] = [
    {
      path: '/dashboard',
      element: <Dashboard />
    },
    {
      path: '/management',
      element: <Management />
    },
    {
      path: '/incidents',
      element: <Incidents />
    },
    {
      path: '/',
      element: <Navigate to="/dashboard" />
    }
  ];

  return useRoutes(routes);
}
Example #2
Source File: Router.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
EmbeddedDocsRouter = (props: PropsWithChildren<{}>) => {
  const { children } = props;
  const { entity } = useEntity();

  // Using objects instead of <Route> elements, otherwise "outlet" will be null on sub-pages and add-ons won't render
  const element = useRoutes([
    {
      path: '/*',
      element: <EntityPageDocs entity={entity} />,
      children: [
        {
          path: '/*',
          element: children,
        },
      ],
    },
  ]);

  const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];

  if (!projectId) {
    return <MissingAnnotationEmptyState annotation={TECHDOCS_ANNOTATION} />;
  }

  return element;
}
Example #3
Source File: App.tsx    From frontend with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
App: FC = () => {
  return (
    <UserProvider>
      <GlobalLayout>
        <Suspense fallback={null}>
          {useRoutes(pageRoutes)}
        </Suspense>
      </GlobalLayout>
    </UserProvider>
  )
}
Example #4
Source File: GlobalRoutes.tsx    From nodestatus with MIT License 6 votes vote down vote up 
GlobalRoutes: FC = () => {
  const routes: RouteObject[] = [
    {
      path: '/login',
      element: <Login />
    },
    {
      path: '/*',
      element: <LayoutHandler />
    }
  ];

  return useRoutes(routes);
}
Example #5
Source File: index.tsx    From ant-simple-draw with MIT License 6 votes vote down vote up 
Router = memo(function Router(props) {
  let element = useRoutes(routes);
  return <>{element}</>;
})
Example #6
Source File: Router.tsx    From one-platform with MIT License 5 votes vote down vote up 
Router = (): ReactElement<any, string | JSXElementConstructor<any>> | null => {
  return useRoutes(routes);
}
Example #7
Source File: FlatRoutes.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
  const app = useApp();
  const { NotFoundErrorPage } = app.getComponents();
  const routes = useElementFilter(props.children, elements =>
    elements
      .getElements<{ path?: string; children: ReactNode }>()
      .flatMap<RouteObject>(child => {
        let path = child.props.path;

        // TODO(Rugvip): Work around plugins registering empty paths, remove once deprecated routes are gone
        if (path === '') {
          return [];
        }
        path = path?.replace(/\/\*$/, '') ?? '/';

        return [
          {
            path,
            element: child,
            children: child.props.children
              ? [
                  // These are the children of each route, which we all add in under a catch-all
                  // subroute in order to make them available to `useOutlet`
                  {
                    path: path === '/' ? '/' : '/*', // The root path must require an exact match
                    element: child.props.children,
                  },
                ]
              : undefined,
          },
        ];
      })
      // Routes are sorted to work around a bug where prefixes are unexpectedly matched
      .sort((a, b) => b.path.localeCompare(a.path))
      // We make sure all routes have '/*' appended, except '/'
      .map(obj => {
        obj.path = obj.path === '/' ? '/' : `${obj.path}/*`;
        return obj;
      }),
  );

  // TODO(Rugvip): Possibly add a way to skip this, like a noNotFoundPage prop
  routes.push({
    element: <NotFoundErrorPage />,
    path: '/*',
  });

  return useRoutes(routes);
}