Type error on React Route component

Question

I'm trying to use the route Route component but it's throwing the following error:

[ts] Type '{ path: "/:shortname"; component: typeof FirstComponent; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Rea...'.

Here's my route config:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

<Router>
    <Link to='/customer'></Link>
    <Route path='/:shortname' component={FirstComponent} />
</Router>

These are the versions I'm using:

"@types/react-router-dom": "^4.0.5"
"react-router-dom": "^4.1.1"

your code looks right, Im using typescript as well, but im not getting this error. — Sujit.Warrier
Could you upload the code for your FirstComponent component? It's clear that the error is the interface between react-router and that component, so we may need to see that code to determine the true root cause. — casieber

Xlee Xlee · Accepted Answer · 2018-01-19T05:09:26

Alright, the problem is that <Router/> element only accepts single child. While your children for Router is an array of Link & Route.

Try wrap your Link and Routes with div or even fancier React.Fragment (after react 16.2+)

<Router>
  <React.Fragment>
    <Link to='/customer'></Link>
    <Route path='/:shortname' component={FirstComponent} />
  </React.Fragment>
</Router>

Type error on React Route component

1 Answers