typescript 导致React Router Dom出错

31moq8wy  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(198)

我正在一个Angular项目中工作，我们正处于实施React的第一阶段（最终完全用React重写了应用，但还没有得到批准）该项目还使用了Typescript，这就是我的问题所在。我正在尝试使用React-Router-Dom来导航应用内部的页面，但是Typescript不断地抛出类似下面这些的错误。2我已经把所有的东西都升级到了最新的版本，但是我仍然得到同样的错误。3我也卸载并重新安装了Typescript，正如我在其他帖子中所看到的。有人能帮我解决这个问题吗？在这一点上，我不关心解决方案是否让Typescript完全忽略React-Router-Dom，我只是厌倦了这个问题。

ERROR in ../node_modules/@remix-run/router/dist/utils.d.ts:161:61 - error TS1110: Type expected.

161 declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param : never;
                                                                ~~~
../node_modules/@remix-run/router/dist/utils.d.ts:161:70 - error TS1005: '}' expected.

161 declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param : never;
                                                                         ~
../node_modules/@remix-run/router/dist/utils.d.ts:161:71 - error TS1128: Declaration or statement expected.

161 declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param : never;
                                                                          ~
../node_modules/@remix-run/router/dist/utils.d.ts:161:73 - error TS1161: Unterminated regular expression literal.

161 declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param : never;

../node_modules/@remix-run/router/dist/utils.d.ts:171:85 - error TS1110: Type expected.

171 declare type PathParam<Path extends string> = Path extends "*" ? "*" : Path extends `${infer Rest}/*` ? "*" | _PathParam<Rest> : _PathParam<Path>;       
                                                                                        ~~~
../node_modules/@remix-run/router/dist/utils.d.ts:171:94 - error TS1005: '}' expected.

171 declare type PathParam<Path extends string> = Path extends "*" ? "*" : Path extends `${infer Rest}/*` ? "*" | _PathParam<Rest> : _PathParam<Path>;       
                                                                                                 ~~~~
../node_modules/@remix-run/router/dist/utils.d.ts:171:98 - error TS1128: Declaration or statement expected.

171 declare type PathParam<Path extends string> = Path extends "*" ? "*" : Path extends `${infer Rest}/*` ? "*" | _PathParam<Rest> : _PathParam<Path>;       
                                                                                                     ~
../node_modules/@remix-run/router/dist/router.d.ts:15:5 - error TS1131: Property or signature expected.

15     get basename(): RouterInit["basename"];
       ~~~
../node_modules/@remix-run/router/dist/router.d.ts:15:9 - error TS1005: ';' expected.

15     get basename(): RouterInit["basename"];
           ~~~~~~~~
../node_modules/@remix-run/router/dist/router.d.ts:15:19 - error TS1005: ';' expected.

15     get basename(): RouterInit["basename"];
                     ~
../node_modules/@remix-run/router/dist/router.d.ts:22:9 - error TS1005: ';' expected.

22     get state(): RouterState;
           ~~~~~
../node_modules/@remix-run/router/dist/router.d.ts:22:16 - error TS1005: ';' expected.

22     get state(): RouterState;
                  ~
../node_modules/@remix-run/router/dist/router.d.ts:29:9 - error TS1005: ';' expected.

29     get routes(): AgnosticDataRouteObject[];
           ~~~~~~
../node_modules/@remix-run/router/dist/router.d.ts:29:17 - error TS1005: ';' expected.

29     get routes(): AgnosticDataRouteObject[];
                   ~
../node_modules/@remix-run/router/dist/router.d.ts:29:43 - error TS1011: An element access expression should take an argument.

29     get routes(): AgnosticDataRouteObject[];

../node_modules/@remix-run/router/dist/router.d.ts:38:17 - error TS1005: ';' expected.

38     initialize(): Router;
                   ~
../node_modules/@remix-run/router/dist/router.d.ts:47:17 - error TS1005: ',' expected.

47     subscribe(fn: RouterSubscriber): () => void;
                   ~
../node_modules/@remix-run/router/dist/router.d.ts:47:36 - error TS1005: ';' expected.

47     subscribe(fn: RouterSubscriber): () => void;
                                      ~
../node_modules/@remix-run/router/dist/router.d.ts:47:48 - error TS1109: Expression expected.

47     subscribe(fn: RouterSubscriber): () => void;
                                                  ~
../node_modules/@remix-run/router/dist/router.d.ts:59:49 - error TS1005: ',' expected.

59     enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;
                                                   ~
../node_modules/@remix-run/router/dist/router.d.ts:59:73 - error TS1109: Expression expected.

59     enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;
                                                                           ~
../node_modules/@remix-run/router/dist/router.d.ts:59:92 - error TS1005: ',' expected.

59     enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;
                                                                                              ~
../node_modules/@remix-run/router/dist/router.d.ts:59:128 - error TS1109: Expression expected.

59     enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;
                                                                                                                                  ~
../node_modules/@remix-run/router/dist/router.d.ts:59:162 - error TS1005: ';' expected.

59     enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;

       ~
../node_modules/@remix-run/router/dist/router.d.ts:59:174 - error TS1109: Expression expected.

59     enableScrollRestoration(savedScrollPositions: Record<string, number>, getScrollPosition: GetScrollPositionFunction, getKey?: GetScrollRestorationKeyFunction): () => void;

                   ~
../node_modules/@remix-run/router/dist/router.d.ts:67:16 - error TS1005: ',' expected.

67     navigate(to: number): void;
                  ~
../node_modules/@remix-run/router/dist/router.d.ts:67:25 - error TS1005: ';' expected.

67     navigate(to: number): void;
                           ~
../node_modules/@remix-run/router/dist/router.d.ts:67:31 - error TS1109: Expression expected.

67     navigate(to: number): void;
                                 ~
../node_modules/@remix-run/router/dist/router.d.ts:73:16 - error TS1005: ',' expected.

73     navigate(to: To, opts?: RouterNavigateOptions): void;
                  ~
../node_modules/@remix-run/router/dist/router.d.ts:73:27 - error TS1109: Expression expected.

73     navigate(to: To, opts?: RouterNavigateOptions): void;
                             ~
../node_modules/@remix-run/router/dist/router.d.ts:73:51 - error TS1005: ';' expected.

73     navigate(to: To, opts?: RouterNavigateOptions): void;
                                                     ~
../node_modules/@remix-run/router/dist/router.d.ts:73:57 - error TS1109: Expression expected.

73     navigate(to: To, opts?: RouterNavigateOptions): void;
                                                           ~
../node_modules/@remix-run/router/dist/router.d.ts:85:14 - error TS1005: ',' expected.

85     fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
                ~
../node_modules/@remix-run/router/dist/router.d.ts:85:31 - error TS1005: ',' expected.

85     fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
                                 ~
../node_modules/@remix-run/router/dist/router.d.ts:85:45 - error TS1005: ',' expected.

85     fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
                                               ~
../node_modules/@remix-run/router/dist/router.d.ts:85:60 - error TS1109: Expression expected.

85     fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
                                                              ~
../node_modules/@remix-run/router/dist/router.d.ts:85:84 - error TS1005: ';' expected.

85     fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
                                                                                      ~
../node_modules/@remix-run/router/dist/router.d.ts:85:90 - error TS1109: Expression expected.

85     fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
                                                                                            ~
../node_modules/@remix-run/router/dist/router.d.ts:92:17 - error TS1005: ';' expected.

92     revalidate(): void;
                   ~
../node_modules/@remix-run/router/dist/router.d.ts:92:23 - error TS1109: Expression expected.

92     revalidate(): void;
                         ~
../node_modules/@remix-run/router/dist/router.d.ts:100:24 - error TS1005: ',' expected.

100     createHref(location: Location | URL): string;
                           ~
../node_modules/@remix-run/router/dist/router.d.ts:100:41 - error TS1005: ';' expected.

100     createHref(location: Location | URL): string;
                                            ~
../node_modules/@remix-run/router/dist/router.d.ts:109:22 - error TS1005: ',' expected.

109     encodeLocation(to: To): Path;
                         ~
../node_modules/@remix-run/router/dist/router.d.ts:109:27 - error TS1005: ';' expected.

109     encodeLocation(to: To): Path;
                              ~
../node_modules/@remix-run/router/dist/router.d.ts:117:22 - error TS1005: ';' expected.

117     getFetcher<TData = any>(key?: string): Fetcher<TData>;
                         ~
../node_modules/@remix-run/router/dist/router.d.ts:117:33 - error TS1109: Expression expected.

117     getFetcher<TData = any>(key?: string): Fetcher<TData>;
                                    ~
../node_modules/@remix-run/router/dist/router.d.ts:117:42 - error TS1005: ';' expected.

117     getFetcher<TData = any>(key?: string): Fetcher<TData>;
                                             ~
../node_modules/@remix-run/router/dist/router.d.ts:117:58 - error TS1005: '(' expected.

117     getFetcher<TData = any>(key?: string): Fetcher<TData>;
                                                             ~
../node_modules/@remix-run/router/dist/router.d.ts:125:23 - error TS1109: Expression expected.

125     deleteFetcher(key?: string): void;
                          ~
../node_modules/@remix-run/router/dist/router.d.ts:125:32 - error TS1005: ';' expected.

125     deleteFetcher(key?: string): void;
                                   ~
../node_modules/@remix-run/router/dist/router.d.ts:125:38 - error TS1109: Expression expected.

125     deleteFetcher(key?: string): void;
                                         ~
../node_modules/@remix-run/router/dist/router.d.ts:132:14 - error TS1005: ';' expected.

132     dispose(): void;
                 ~
../node_modules/@remix-run/router/dist/router.d.ts:132:20 - error TS1109: Expression expected.

132     dispose(): void;
                       ~
../node_modules/@remix-run/router/dist/router.d.ts:139:60 - error TS1005: '(' expected.

139     _internalFetchControllers: Map<string, AbortController>;
                                                               ~
../node_modules/@remix-run/router/dist/router.d.ts:146:56 - error TS1005: '(' expected.

146     _internalActiveDeferreds: Map<string, DeferredData>;
                                                           ~
../node_modules/@remix-run/router/dist/router.d.ts:147:1 - error TS1128: Declaration or statement expected.

147 }
    ~

maintain.tsx

// Material-UI Imports
import { Box } from '@material-ui/core';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
// React Imports
import * as React from 'react';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
// React Component Imports
import Departments from '../../../react-components/maintain-pages/departments';
import Equipment from '../../../react-components/maintain-pages/equipment';
import Locations from '../../../react-components/maintain-pages/locations';
import Ltm from '../../../react-components/maintain-pages/ltm';
import Matrix from '../../../react-components/maintain-pages/matrix';
import { NavBar } from '../../../react-components/navbar/NavBar';

const Maintain = () => {
  const classes = useStyles();

  return(
    <BrowserRouter>
      <Box className={classes.root} sx={{margin: '24px 0px 0px 24px'}}>
        <h1>Maintain</h1>

        <NavBar/>
        <Routes>
           <Route path='/' element='' />  
           <Route path='/ltm' element={<Ltm />}/>
           <Route path='/matrix' element={<Matrix />}/>
           <Route path='/equipment' element={<Equipment />}/>
           <Route path='/departments' element={<Departments />}/>
           <Route path='/locations' element={<Locations />}/>
        </Routes>

      </Box>
    </BrowserRouter>
  );
};

export default Maintain;

NavBar.tsx

import * as React from 'react';
import { NavLink } from 'react-router-dom';
import './NavBarStyling.css';

// NavLinks
const menuItems = [
    {id: 1, label: 'LTM', path: '/ltm'},
    {id: 2, label: 'Matrix', path: '/matrix'},
    {id: 3, label: 'Equipment', path: '/equipment'},
    {id: 4, label: 'Departments', path: '/departments'},
    {id: 5, label: 'Locations', path: '/locations'},
];

// tslint:disable: no-shadowed-variable
export const NavBar = () => {
    return(
        <nav className='nav'>
            <ul>
                {menuItems.map(menuItems => (
                    <li key={menuItems.id} >
                        <NavLink to={menuItems.path} >
                            {menuItems.label}
                        </NavLink>
                    </li>
                ))}
            </ul>
        </nav>
    );
};

package.json

{
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@types/react-router": "^5.1.20",
    "@types/reactstrap": "^8.7.2",
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2"
  },
  "devDependencies": {
    "@babel/preset-flow": "^7.18.6",
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "flow-babel-webpack-plugin": "^1.1.1",
    "tslib": "^2.4.1",
    "typescript": "^4.9.4"
  }
}
typescript

1条答案

按热度按时间
sulc1iza

sulc1iza1#

你已经安装了react-router-dom@6.6.2。RRDv6完全是用Typescript编写的。没有必要使用@types/react-router-dom类型作为开发依赖项。
从项目的根目录运行以下命令之一，从项目中删除@types/react-router-dom。

npm uninstall --save-dev @types/react-router-dom
npm un -D @types/react-router-dom

这将删除dev依赖项并更新package.json文件。
还要确保您使用的是相同版本的react和react-dom ...这两个库始终以锁步方式使用。

npm i -S react@18 react-dom@18

如有必要，查找并安装相应的@types/react和@types/react-dom。

赞(0）分享  回复(0）举报  2023-01-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com