JSX element type "Route" has no string or signal signatures
I am replacing the code from javascript to typescript. But, failed to build.
- JSX element type 'Router' does not have any construct or call signatures.
- JSX element type 'Switch' does not have any construct or call signatures.
-JSX element type 'Route' does not have any construct or call signatures.
How do I fix this error?
wrong code
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Switch, Route } from 'react-router';
import { Provider } from 'react-redux';
import createBrowserHistory from 'history/createBrowserHistory';
import Counter from './containers/Container';
import store from './stores/store';
import NotFound from './components/NotFound';
const history = createBrowserHistory();
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Switch>
<Route exact path="/counter" component={Counter} />
<Route path="/counter/:id" component={Counter} />
<Route component={NotFound}/>
</Switch>
</Router>
</Provider>
, document.getElementById('app')
);
and the same error happened when i used import { Route } from 'react-router-dom';
.
source to share
Ok, first you need to install react-router-dom as mentioned here . Then do something like this,
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Counter from './containers/Container';
import store from './stores/store';
import NotFound from './components/NotFound';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<Switch>
<Route path="/counter" component={Counter} />
<Route path="/invalid/path" component={NotFound} />
</Switch>
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
Please note that you must provide a path for each route. The default route configuration will be something like this. This should complete as it matches the urls in the given order.
<Route path="/" component={PostsIndex} />
A component can be simply written as follows.
import React, { Component } from 'react';
class PostsIndex extends Component {
render() {
return (
<div>
Index page
</div>
)
}
}
Anyway, I have not used react type scripts as it is rarely used. But the above approach should work.
Hope this helps. Happy coding!
source to share
I cannot thank you for the words! Bug fixed after changed node_modules/@types/response-router/index.d.ts like this.
before
export class MemoryRouter extends React.Component<MemoryRouterProps> { }
export class Prompt extends React.Component<PromptProps> { }
export class Redirect extends React.Component<RedirectProps> { }
export class Route extends React.Component<RouteProps> { }
export class Router extends React.Component<RouterProps> { }
export class StaticRouter extends React.Component<StaticRouterProps> { }
after
export class MemoryRouter extends React.Component<MemoryRouterProps, void> { }
export class Prompt extends React.Component<PromptProps, void> { }
export class Redirect extends React.Component<RedirectProps, void> { }
export class Route extends React.Component<RouteProps, void> { }
export class Router extends React.Component<RouterProps, void> { }
export class StaticRouter extends React.Component<StaticRouterProps, void> { }
This is "@ types / react-router": error "^ 4.0.12".
source to share
my last code
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { BrowserRouter as Router, Route, Switch, RouteComponentProps } from 'react-router-dom';
import { Provider } from 'react-redux';
import Counter from './containers/Container';
import store from './stores/store';
import NotFound from './components/NotFound';
class PostsIndex extends React.Component<RouteComponentProps<any>, {}> {
render() {
return (
<div>
Index page
</div>
)
}
}
ReactDOM.render(
<Provider store={store}>
<Router>
<div>
<Switch>
<Route exact path="/" component={PostsIndex} />
<Route exact path="/counter" component={Counter} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
</Provider>
, document.getElementById('app')
);
containers / component
export default connect(
(state: ReduxState) => ({value: state.counter}),
(dispatch: Dispatch<ReduxAction>, ownProps: RouteComponentProps<{myParams: string}>) => {
return {actions: new ActionDispatcher(dispatch)}
}
)(Counter);
Error message
ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(46,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(56,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(74,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(79,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(87,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(92,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).
ERROR in ./src/Index.tsx
(24,10): error TS2604: JSX element type 'Switch' does not have any construct or call signatures.
ERROR in ./src/Index.tsx
(25,12): error TS2604: JSX element type 'Route' does not have any construct or call signatures.
ERROR in ./src/Index.tsx
(26,12): error TS2604: JSX element type 'Route' does not have any construct or call signatures.
ERROR in ./src/Index.tsx
(27,12): error TS2604: JSX element type 'Route' does not have any construct or call signatures.
There may be an error in router responsiveness ...
build fails but successful page transition and rendering ...
source to share