reactjs - Problemă cu <BrowserRouter> TS2769: Nicio suprasarcină nu corespunde acestei apelări

Am primit această eroare. Nu știu cum să o rezolv, nu am văzut o soluție potrivită pe Internet. Sunt nou în TypeScript, așa că nu am nicio idee cum să remediez această problemă. Inițial, proiectul era în JS, așa că va fi transferat în TS folosind ts-migrate. Acum corectez erorile cauzate de transfer.

Cod de eroare:

TS2769: Nici o suprasarcină nu corespunde acestei apelări.

Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
     
Type '{ children: (string | Element)[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.
  
Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
     
Type '{ children: (string | Element)[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.

Editare: șterge "." după </div>
App.tsx

import React, {useEffect, useState, FC} from 'react';
import './styles/App.css';
import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
import Navbar from "./components/UI/Navbar/Navbar";
import AppRouter from "./components/AppRouter";
import {AuthContext} from "./context";

const App: FC = () => {
    const [isAuth, setIsAuth] = useState(false);
    const [isLoading, setLoading] = useState(true);
    useEffect(() => {
        if (localStorage.getItem('auth')) {
            setIsAuth(true)
        }
        setLoading(false);
    }, [])
    return (
        <AuthContext.Provider value={{
            isAuth,
            setIsAuth,
            isLoading}}>

            <BrowserRouter>
                <div>
                    <Navbar />
                <AppRouter/>

                </div>

            </BrowserRouter>

        </AuthContext.Provider>

    );
}

export default App;

Navbar.tsx

import React, {useContext} from 'react';
import {Link} from "react-router-dom";
import {AuthContext} from "../../../context";

const Navbar = () => {
    const {isAuth, setIsAuth} = useContext(AuthContext);

    const logout = () => {
        setIsAuth(false);
        localStorage.removeItem('auth')
    }

    return (
        <div className="navbar">

            <div className="navbar__links">
                <Link className='linkText' style={{marginLeft:'20px'}} to="/about" >О сайте</Link>
                <Link className='linkText' to="/posts">События</Link>
            </div>
            
        </div>
    );
};

export default Navbar;

AppRouter.tsx

import React, {FC, useContext} from 'react';
import {Redirect, Route, Switch} from "react-router-dom";
import {privateRoutes, publicRoutes} from "../router";
import {AuthContext} from "../context";
import Loader from "./UI/Loader/Loader";
const AppRouter: FC = (props: any) => {
    const isAuth = useContext(AuthContext);
    const isLoading = useContext(AuthContext);
    if (isLoading) {
        return <Loader/>
    }
    return (
        isAuth
            ?

            <Switch>
                {privateRoutes.map(route =>
                    <Route
                        component={route.component}
                        path={route.path}
                        exact={route.exact}
                        key={route.path}
                    />
                )}
                <Redirect to='/posts'/>
                {props.children}
            </Switch>

            :
            <Switch>
                {publicRoutes.map(route =>
                    <Route
                        component={route.component}
                        path={route.path}
                        exact={route.exact}
                        key={route.path}
                    />
                )}
                <Redirect to='/login'/>
                {props.children}
            </Switch>
    );
};

export default AppRouter;

Context

import {createContext} from 'react'
export const AuthContext = createContext<any>([true,null,null]);

Versiune

@types/react": "^18.0.20",
@types/react-dom": "^17.0.2",
@types/react-router-dom": "^5.3.0"

Răspuns #1

Am schimbat versiunea de React la 17.0.3 și a funcționat. Nu este cea mai bună soluție, dar măcar funcționează.

Răspunsul #2

Am avut o problemă similară cu TypeScript atunci când foloseam react-router-dom cu TypeScript. După ce am actualizat pachetele "react-router-dom" la 5.3.4 și "@types/react-router-dom" la 5.3.3, eroarea a dispărut.