React router in typescript giving errors

Question

My requirement was simple. Just wanted to introduce the React router in a existing React application written in typescript.

I installed react-router using below commands:

npm install react-router-dom @types/react-router-dom

Used in my App.js as below:

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;

When I try to compile my code and execute using gulp serve --nobrowser I get below errors.

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

MY package.json is has :

"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"
 }
}

Someone, please help me in understanding the issue here. Am I doing something wrong? The typescript version reflected in package-lock.json is: "typescript": "~2.9.2"

Kindly Help! Thanks.

Here is my 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"
  ]
}

Answer 1

First of all, be sure to only use .tsx as file extension for Typescript files and be sure to import React on top of your files (in case thats missing)

Also try to pass your Component directly into the Routes component-property.

For example:
<Route exact path='/CompanyDirectory' component={CompanyDirectory} />

In case this doesn't help, please provide some informations about the tsconfig you are using. as well as your @types/react-router-dom version, because it is not visible in your package.json snipped.

Answer 2

You forgot to import React in Routes.js and App.js if the problem still happen tell me