Question 180330 in Reactjs Question posted in
The new location for the React Documentation can be found here.

“Is Reactjs – RouteChildrenProps an exported member?”

I am getting the below error pointing to ‘RouteChildrenProps’:

enter image description here

I am just trying to get through a tutorial but I got stuck here. Here is the full code:

import React from 'react';
import { Route, RouteChildrenProps, Routes } from 'react-router';
import routes from './config/routes';

export interface IApplicationProps {}

const Application: React.FunctionComponent<IApplicationProps> = (props) => {
  return (
    <Routes>
      {routes.map((route, index) => {
        return <Route 
          key={index} 
          exact={route.exact} 
          path={route.path} 
          render={(routeProps: RouteChildrenProps<any>) =>
            <route.component {...routeProps} />} />;
          }
      )}
    </Routes>
  );
};

export default Application;

The tutorial itself did not encounter this issue, so I’m hoping someone here can me solve this.

Tags:

2

Answers


  1. 0

    According to the react-router plugin, it’s exported members as bellows. It does not contain RouteChildrenProps, It means you are unable to use that property. Please check whether you are using which version of react-router you are using (in this answer I’m referring react-router v6.11.2). Sometimes now this property can be deprecated.

    react-router/packages/react-router/index.ts

        // Expose react-router public API
export type {
  ActionFunction,
  ActionFunctionArgs,
  AwaitProps,
  Blocker as unstable_Blocker,
  BlockerFunction as unstable_BlockerFunction,
  DataRouteMatch,
  DataRouteObject,
  Fetcher,
  Hash,
  IndexRouteObject,
  IndexRouteProps,
  JsonFunction,
  LazyRouteFunction,
  LayoutRouteProps,
  LoaderFunction,
  LoaderFunctionArgs,
  Location,
  MemoryRouterProps,
  NavigateFunction,
  NavigateOptions,
  NavigateProps,
  Navigation,
  Navigator,
  NonIndexRouteObject,
  OutletProps,
  Params,
  ParamParseKey,
  Path,
  PathMatch,
  Pathname,
  PathPattern,
  PathRouteProps,
  RedirectFunction,
  RelativeRoutingType,
  RouteMatch,
  RouteObject,
  RouteProps,
  RouterProps,
  RouterProviderProps,
  RoutesProps,
  Search,
  ShouldRevalidateFunction,
  To,
};

    If you want to implement a simple route in your application you can follow the bellow mechanism (remember for this I have used the typescript approach)

    import React from "react";
import { Navigate, RouterProvider, createBrowserRouter } from "react-router-dom";
import { Status } from "./interfaces/IAuth";
import CardPage from "./pages/CardPage";
import HomePage from "./pages/HomePage";
import ListPage from "./pages/ListPage";
import LoginPage from "./pages/Login";
import RegisterPage from "./pages/Register";

const protectedRouter = createBrowserRouter(
    [
        {
            path: "/",
            element: <HomePage />
        },
        {
            path: "/list-component",
            element: <ListPage />
        },
        {
            path: "/card-page",
            element: <CardPage />
        },
    ],
    { basename: '/react-fundamentals' }
);

const publicRouter = createBrowserRouter(
    [
        {
            path: "/",
            element: <LoginPage />
        },
        {
            path: "/register",
            element: <RegisterPage />
        },
        {
            path: "/home",
            element: <HomePage />
        },
        {
            path: "*",
            element: <Navigate to="/" replace />
        }
    ],
    { basename: '/react-fundamentals' }
);

const AppRouter: React.FC<{ status?: Status }> = ({ status }) => {

    const selectedConfig = (status === 'authenticated') ? protectedRouter : publicRouter;

    return (
        <React.StrictMode>
            <RouterProvider router={selectedConfig} />
        </React.StrictMode>
    )
}

export default AppRouter;
    Login or Signup to reply.
  2. 0

    React-Router v6 removed route props, these are a v4/5 export. The Route component API changed significantly from v4/5 to v6. There are no route props, no exact prop since routes are now always exactly matched, and all routed content is rendered on a single element prop taking a React.ReactNode, e.g. JSX, value.

    import React from 'react';
import { Route, Routes } from 'react-router';
import routes from './config/routes';

export interface IApplicationProps {}

const Application: React.FunctionComponent<IApplicationProps> = (props) => {
  return (
    <Routes>
      {routes.map((route) => {
        const Component = route.component;
        return (
          <Route 
            key={route.path} 
            path={route.path} 
            element={<Component />}
          />
        );
      })}
    </Routes>
  );
};

    If any of the routed component need to access what was previously passed via props, they should use the provided React hooks: useNavigate for navigate function that replaced useHistory, useParams for route path parameters, useLocation for the location object, etc.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search