我的要求很简单。只是想在现有的用 typescript 编写的 React 应用程序中引入 React 路由器。
我使用以下命令安装了 react-router：
npm install react-router-dom @types/react-router-dom
在我的 App.js 中使用如下：
import * as React from 'react';
import { Link, HashRouter as Router } from 'react-router-dom';
import Routes from './routes';
class App extends React.Component {
render() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/CompanyDirectory">CompanyDirectory</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Routes />
</div>
</Router>
);
}
}
export default App;
Routes.js：
import * as React from 'react';
import { Route, Switch } from 'react-router-dom';
import CompanyDirectory from './CompanyDirectory/CompanyDirectory';
import Home from './Home/Home';
const Routes = () => {
return (
<Switch>
<Route exact path='/CompanyDirectory' component={() => <CompanyDirectory />} />
<Route exact path='/' component={() => <Home />} />
</Switch>
)
}
export default Routes;
当我尝试编译我的代码并使用 gulp serve --nobrowser 执行时
我收到以下错误。
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(94,33): error TS1011: An element access expression should take an argument.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(95,11): error TS1109: Expression expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(96,15): error TS1109: Expression expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(97,12): error TS1109: Expression expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(98,1): error TS1128: Declaration or statement expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(146,100): error TS1110: Type expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(146,109): error TS1005: '}' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(146,114): error TS1128: Declaration or statement expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(146,115): error TS1128: Declaration or statement expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,18): error TS1005: ';' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,19): error TS1005: ';' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,26): error TS1005: ';' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,33): error TS1128: Declaration or statement expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,35): error TS1005: ';' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,42): error TS1005: ';' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(152,49): error TS1161: Unterminated regular expression literal.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(153,43): error TS1005: '(' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,5): error TS1005: '(' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,9): error TS1005: ',' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,26): error TS1005: '}' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,32): error TS1005: ',' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,33): error TS1135: Argument expression expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,35): error TS1005: ',' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(154,42): error TS1005: ':' expected.
[16:49:52] Error - [tsc] node_modules/@types/react-router/index.d.ts(188,1): error TS1160: Unterminated template literal.
我的 package.json 有：
"react-router-dom": "^5.2.0",
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
"@microsoft/sp-build-web": "1.8.2",
"@microsoft/sp-module-interfaces": "1.8.2",
"@microsoft/sp-tslint-rules": "1.8.2",
"@microsoft/sp-webpart-workbench": "1.8.2",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"@types/react": "^16.7.22",
"@types/react-dom": "^16.8.0",
"ajv": "~5.2.2",
"gulp": "~3.9.1"
}
}
有人，请帮助我理解这里的问题。难道我做错了什么？
package-lock.json 中反映的打字稿版本是：
"typescript": "~2.9.2"
请帮助！谢谢。
这是我的 tsconfig.json：
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
},
"include": [
"src/**/*.ts"
, "src/<Project>/components/routes.ts" , "src/<Project>/components/App.tsx" ],
"exclude": [
"node_modules",
"lib"
]
}
答案 0 :(得分：1)
首先，请确保只使用 .tsx 作为 Typescript 文件的文件扩展名，并确保在文件顶部导入 React（以防丢失）
还尝试将您的组件直接传递到 Routes component 属性中。
例如：
<Route exact path='/CompanyDirectory' component={CompanyDirectory} />
如果这没有帮助，请提供有关您正在使用的 tsconfig 的一些信息。以及您的 @types/react-router-dom 版本，因为它在您的 package.json 中是不可见的。
答案 1 :(得分：0)
您忘记在 Routes.js 和 App.js 中导入 React
如果问题仍然发生告诉我