[Fix] TS2322: Type '{ Render: () => Element; }' Is Not Assignable To Type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps

Recently when I was trying to update the React Router v6 (react-router-dom 6.0.1), it gave me an unexpected error, ‘TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’. Below is a snippet of the error shown:

TS2322: Type '{ render: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.   Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.

I tried to do it based on the document on react rerouter, which is shown here .

*Remove any `<Redirect>` elements that are directly inside a `<Switch>`.*

I would like to share the steps that helped me to fix the error, TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’.

Why TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’ is seen?

The error, TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’ is seen because of a bug in the documents. Even though it looks like the section about react rerouting talks about upgrading from v5 to v5.1; they only removed render in v6.

A simple solution to fix this is to use the no match route approach. You can check its documentation here.

As per the official Reactrouter tutorial, “no match route” method is explained as mentioned below:

A detailed solution to fix the ImportError: cannot import name ‘escape’ from ‘jinja2 error is provided below:

How to Fix TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’ error?

Method 1: No route approach

To fix the TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’

you should use the no match route approach. You can check its documentation here.

To use the no route approach, add the below-mentioned code to your project and run it:

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

You can set the replace prop in your code to keep the history clean. This will avoid extra redirects after the user click back

Method 2: Direct method

To fix the TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’

You can add the below-mentioned code to your project and run it. You can check its documentation here.

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();

useEffect(() => {
   if (LoggedIn){
      return navigate("/");
   }
},[LoggedIn]);

Conclusion

To fix the TS2322: Type ‘{ render: () => Element; }’ is not assignable to type ‘IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)’ error; you can use the no match route approach. If this method does not work for you and you are still facing the same error, you can try to avoid the error by directly adding a snippet of the above-mentioned code to fix your error.