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

Yes I renamed the files but still the same errors as above. Can you please help. Tried a number of things but not able to figure out the issue — Reshmi Agarwal
– Reshmi Agarwal, Commented Apr 21, 2021 at 17:30

TMFLGR · Accepted Answer · 2021-04-21 14:47:11Z

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.

edited Apr 21, 2021 at 14:47

answered Apr 21, 2021 at 11:51

TMFLGR

2415 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reshmi Agarwal Over a year ago

When I change the file extension from .tsx to .ts . I start getting errors in my file. What is the difference between them . Can you please explain when we use either of these extensions

TMFLGR Over a year ago

Oh sorry, i meant .tsx not .ts. In your original question you are naming the files with .js fileextensions

Egor Pashko · Accepted Answer · 2021-04-21 11:52:22Z

0

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

answered Apr 21, 2021 at 11:52

Egor Pashko

3542 silver badges9 bronze badges

1 Comment

Reshmi Agarwal Over a year ago

I have imported in routes.tsx and App.tsx:``` 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;``` May be that line did not got pasted in the snippet above

Collectives™ on Stack Overflow

React router in typescript giving errors

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related