有問題<browserrouter> TS2769：沒有過載匹配此調用</browserrouter>

Question

我收到了這個錯誤。 不知道怎么解決，網上沒看到合適的解決辦法。 我是 typescript 的新手，所以我不知道如何解決這個問題。 最初項目是在js上的，所以會使用ts-migrate轉移到ts上。 現在我正在更正由於轉移引起的錯誤。

錯誤代碼：

TS2769：沒有與此調用匹配的過載。

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>'.

編輯：刪除“。” 在</div>之后
應用程序.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;

導航欄.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;

語境

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

版本

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

Answer 1

問題： <BrowserRouter>上有多個子節點

BrowserRouter組件只能接受一個孩子——而不是一個數組。 根據react-router v5 文檔：

注意：在 React < 16 上，您必須使用單個子元素，因為渲染方法不能返回多個元素。 如果您需要多個元素，您可以嘗試將它們包裝在一個額外的<div>或<React.Fragment>中。

知道了這一點，讓我們看一下您的App.tsx文件：

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

                </div>.

            </BrowserRouter>

你有一個小小的錯誤，那就是那個錯位的時期. div結束后。 這個人： </div>.

通常一個字符串和一個div都可以是反應元素的子元素。 這種類型—— string和Element的混合數組又名{ children: (string | Element)[]; } 大多數組件都允許使用{ children: (string | Element)[]; } 。 但由於單子要求， BrowserRouter不允許這樣做。

Answer 2

我將 react 的版本更改為 17.0.3 並且它起作用了。 不是最好的解決方案，但至少它有效。

Answer 3

使用 react-router-dom 版本 5.3.3