[Bug]: Router type doesn't exist

[Beladric]

What version of React Router are you using?

6.6.2

Steps to Reproduce

That's a little bit hard to reproduce, because for the majority of projects it's not a bug. I worked on a React template which hold strong ESLint rules. One of them enforce to type everything. So when I declared a variable to store createBrowserRoute in need to type it in this template.

import React from 'react';
import ErrorPage from "../Pages/ErrorPage";
import {createBrowserRouter} from "react-router-dom";

// ROUTES must be typed

export const ROUTES = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);

Nonetheless, according to my IDE (JetBrains WebStorm), the type of my variable ROUTES is Router from react-router-dom which aren't a type. I tried some little tricks as typeof ROUTES as type, but it's occurring another TS issue.

import React from 'react';
import ErrorPage from "../Pages/ErrorPage";
import {createBrowserRouter, Router} from "react-router-dom";

// Error TS : 'Router' refers to a value, but is being used as a type here. Did you mean 'typeof Router'?

export const ROUTES: Router = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);

import React from 'react';
import ErrorPage from "../Pages/ErrorPage";
import {createBrowserRouter, type Router} from "react-router-dom";

// Error TS : Type 'Router' is not assignable to type '({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps) => ReactElement<any, string | JSXElementConstructor<any>> | null'.   Type 'Router' provides no match for the signature '({ basename: basenameProp, children, location: locationProp, navigationType, navigator, static: staticProp, }: RouterProps): ReactElement<any, string | JSXElementConstructor<any>> | null'.

export const ROUTES: typeof Router = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);

Type any is disabled in the template to avoid abusive usage ❗

Expected Behavior

A type Router that can be used as bellow :

import React from 'react';
import ErrorPage from "../Pages/ErrorPage";
import {createBrowserRouter, type Router} from "react-router-dom";

export const ROUTES: Router = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);

Actual Behavior

I don't found any matching type for my variable ROUTES which store cerateBrowserRouter method.

[atfzl]

I've found a workaround to this. You can use the type of the return value of createBrowserRouter.

type Router = ReturnType<typeof createBrowserRouter>;

[brophdawg11]

I agree this is a bit confusing. You're actually importing the <Router> component from react-router-dom there which is why it's giving you the "Router refers to a value" error. What you want is the Router type from the underlying @remix-run/router package which isn't at the moment re-exported through react-router-dom.

So you can import that directly, or just go with the ReturnType alias presented by @atfzl above.

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnA3nAShArjFKOAXzgDMoIQ4ByAAShRGAA8BaKXAOwHpL9CNANwAoUJFgY4AY0YBDAgCFKAdwDOhHAKKkKVWvOkwOeAlDYATKsJEiANinj8zcALwz5S1RqhazACgBtdDAFAAsALloeGmIAXQBKUTgeHjgAPQB+WwcnU0IAJii-QjcPFAUUZQh1TXyoIJDwqJoY+KSRFLSszqA

[chioio]

Is there any update?

[brophdawg11]

See the above answer: #9915 (comment)

The code posted by the OP is incorrect - because it's is importing the <Router> component from react-router-dom and not the Router type from @remix-run/router:

import {createBrowserRouter, Router} from "react-router-dom";
//                           ^ ❌ incorrect                     

export const ROUTES: Router = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);

Instead you can use ReturnType:

import {createBrowserRouter} from "react-router-dom";

type Router = ReturnType<typeof createBrowserRouter>;

export const ROUTES: Router = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);

Or import the Router type from @remix-run/router:

import type {Router} from "@remix-run/router";
import {createBrowserRouter} from "react-router-dom";

export const ROUTES: Router = createBrowserRouter([
    {
        path: "/",
        element: <ErrorPage/>,
        errorElement: <ErrorPage/>,
    },
]);