JSX 元素类型 'Route' 没有任何构造或调用签名

Posted 2023-02-22

【中文标题】JSX 元素类型 \'Route\' 没有任何构造或调用签名

【英文标题】：JSX element type 'Route' does not have any construct or call signaturesJSX 元素类型 'Route' 没有任何构造或调用签名

【发布时间】：2017-12-05 15:10:33

【问题描述】：

我正在将代码从 javascript 替换为 typescript。但是，构建失败。 - 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.

如何解决这个错误？

代码错误

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')
);

当我使用 import Route from 'react-router-dom'; 时发生同样的错误。

【问题讨论】：

这是什么版本的react路由器？

"react-router": "^4.1.1", "@types/react-router": "^4.0.12",

【参考方案1】：

好的，首先你必须按照here 的说明安装 react-router-dom。然后做这样的事情，

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'));

请注意，您必须提供每条路线的路径。默认路由配置是这样的。这应该最后出现，因为它与给定顺序的 url 匹配。

<Route path="/" component=PostsIndex />

组件可以简单的写成这样。

import React,  Component  from 'react';
class PostsIndex extends Component 
  render() 
    return (
      <div>
        Index page
      </div>
    )
  

无论如何，我没有使用带有 react 的类型脚本，因为它很少使用。但是上面给定的方法应该有效。

希望这会有所帮助。快乐编码！

【讨论】：

Ravindra Ranwala，谢谢您的回答。我尝试安装 react-router-dom 并像这样修改代码。但是，发生了同样的错误。 Counter Counter NotFound 这些类型是函数。是这个bug的原因吗？

你能用最新的代码更新这个问题，这样我就可以调查一下。您似乎从错误的路径导入了 Counter 组件，或者您现在可能已经导出了该模块。请使用最新的错误消息和代码更新问题，以便我可以进一步调查。

我刚刚注意到你有两个不同路径的相同计数器组件。删除其中一个，然后再试一次。我更新了答案

我已经完成了与建议的代码相同的操作。仍然看到与问题中提到的相同的错误。

【参考方案2】：

我有类似的问题，从改变后

export class Provider extends React.Component<ProviderProps>  

到

export class Provider extends React.Component<ProviderProps, void>  

在 index.d.ts 中，问题消失了。 希望对您有所帮助。

【参考方案3】：

我对你的言语感激不尽！ 像这样修改 node_modules/@types/react-router/index.d.ts 后修复的错误。

之前

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>  

之后

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>  

这是 "@types/react-router": "^4.0.12" 的错误。

【讨论】：

您绝对不应该手动编辑node_modules 文件夹的内容。