javascript - How to use React router v6.4 with typescript properly? - Stack Overflow

admin管理员组

文章数量:1279055

I'm trying to use react-router-dom v6.4+ in my project. I implemented it as a route array of objects. Its worked as routing but suddenly I got another issue realated this. I can't call any hook inside the Component which located on element property in route array.
In the route.ts file:

import MainLayout from './container/layouts/mainLayout/MainLayout'
import ErrorPage from './view/Error'
import Home from './view/Home'

const routes: RouteObject[] = [
  {
    path: '/',
    element: MainLayout(),
    children: [
      {
        index: true,
        element: Home(),
      },
    ],
  },
  {
    path: '*',
    element: ChangeRoute('/404'),
  },
  {
    path: '/404',
    element: ErrorPage(),
  },
]

const router = createBrowserRouter(routes)

export default router

and in the app.ts file:

<RouterProvider router={router} fallbackElement={<React.Fragment>Loading ...</React.Fragment>} />

But If I try to use any hook , inside MainLayout ponent , its saying

code in MainLayout ponent :

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Layout className='layout'>
      <SideBar collapsed={collapsed} />
      <Layout>
        <Topbar collapsed={collapsed} setCollapsed={setCollapsed} />
        <Outlet />
      </Layout>
    </Layout>
  )
}

export default MainLayout

I think if I use element: <MainLayout/> instead of element: MainLayout(), then this issue will resolve. but typescript doesnt allow me to do this. and on the documentation every thing is on plain javascript. only one type defination there is this

How to solve this? Kindly guide me.

Edit Here is the codesandbox demo : visit sandbox

I'm trying to use react-router-dom v6.4+ in my project. I implemented it as a route array of objects. Its worked as routing but suddenly I got another issue realated this. I can't call any hook inside the Component which located on element property in route array.
In the route.ts file:

import MainLayout from './container/layouts/mainLayout/MainLayout'
import ErrorPage from './view/Error'
import Home from './view/Home'

const routes: RouteObject[] = [
  {
    path: '/',
    element: MainLayout(),
    children: [
      {
        index: true,
        element: Home(),
      },
    ],
  },
  {
    path: '*',
    element: ChangeRoute('/404'),
  },
  {
    path: '/404',
    element: ErrorPage(),
  },
]

const router = createBrowserRouter(routes)

export default router

and in the app.ts file:

<RouterProvider router={router} fallbackElement={<React.Fragment>Loading ...</React.Fragment>} />

But If I try to use any hook , inside MainLayout ponent , its saying

code in MainLayout ponent :

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Layout className='layout'>
      <SideBar collapsed={collapsed} />
      <Layout>
        <Topbar collapsed={collapsed} setCollapsed={setCollapsed} />
        <Outlet />
      </Layout>
    </Layout>
  )
}

export default MainLayout

I think if I use element: <MainLayout/> instead of element: MainLayout(), then this issue will resolve. but typescript doesnt allow me to do this. and on the documentation every thing is on plain javascript. only one type defination there is this

How to solve this? Kindly guide me.

Edit Here is the codesandbox demo : visit sandbox

• javascript
• reactjs
• typescript
• react-router-dom

Share Improve this question Follow edited Nov 29, 2022 at 5:44 Arijit asked Nov 29, 2022 at 5:01 ArijitArijit 13411 silver badge88 bronze badges 8

• The react docs state that hooks can only be called in ponents , but you are using the ponent as a function which is wrong, you have to pass in your ponent as an element – Dev Man Commented Nov 29, 2022 at 5:03
• Thats what I'm looking for, How to do that? in js ,I can do this, but here ts doesnt allowing me. – Arijit Commented Nov 29, 2022 at 5:04
• what is the error that typescript is giving you – Dev Man Commented Nov 29, 2022 at 5:07
• type MainLayout = /*unresolved*/ any 'MainLayout' refers to a value, but is being used as a type here. Did you mean 'typeof MainLayout'?ts(2749) – Arijit Commented Nov 29, 2022 at 5:08
• Hmm, other than the incorrect routes config, this seems more like an issue specifically in the MainLayout file. Can you edit the post to include a plete minimal reproducible example for us to inspect, along with the plete error message or linting error text and the line of code causing the issue? – Drew Reese Commented Nov 29, 2022 at 5:10

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 10

Changes the name of the route.ts file to route.tsx, now you can will set ponents in the element object property, this works for me.

The element prop expects a React.ReactNode, you are directly calling a React function instead of passing it as JSX.

Example:

const routes: RouteObject[] = [
  {
    path: '/',
    element: <MainLayout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
    ],
  },
  {
    path: '*',
    element: <ChangeRoute redirect='/404' />,
  },
  {
    path: '/404',
    element: <ErrorPage />,
  },
]

本文标签： javascriptHow to use React router v64 with typescript properlyStack Overflow