BrowserRouter 与打字稿反应答案

【问题标题】：BrowserRouter in react with typescriptBrowserRouter 与打字稿反应
【发布时间】：2017-12-24 07:00:20
【问题描述】：

我在 Reactjs + type 脚本中有简单的应用程序。我正在尝试使用 react-router-dom 中的 BrowserRouter。

这是我的代码：

import * as React from "react"

import { Popular } from "./popular"

import { BrowserRouter as Router, Route } from "react-router-dom"

export interface AppProp {

}

export interface AppState {

}
export class App extends React.Component<AppProp , AppState > {

    render() {
        return (

            <div className='container'>
                <Router>
                    <Route path='/popular' component={Popular} />
                </Router>
            </div>
        )
    }
}

export default App

我收到以下错误：

[at-loader] 中的错误 ./node_modules/@types/react-router-dom/index.d.ts:55:25 TS2314：通用类型“组件”需要 2 个类型参数。

[at-loader] ./src/components/app.tsx:25:18 中的错误 TS2604：JSX 元素类型“路由器”没有任何构造或调用签名。

我在谷歌上搜索但没有任何帮助。

有人有想法吗？

BR纳达夫

【问题讨论】：

您需要将历史对象传递给BrowserRouter
我一般不会在之前使用
或者你可以尝试清除 className 吗？
您好，感谢您的回复，即使路径在 div 之前仍然出现错误。

标签： reactjs typescript

【解决方案1】：

我能够将 BrowserRouter 与 typescript 一起使用，并且能够将 history 道具和我的 redux 道具/thunk 传递给我的组件。关键是在应用程序级别使用“withRouter”。我还必须使用带有“Route”的渲染属性来降低我的道具。我现在可以在我的组件以及我的 props 和 thunk 中使用“this.props.history.push("/url1")" 和 "this.props.history.replace("/url2")"。扩展符号也很重要。

import { RouteComponentProps, withRouter,
         Switch, Route, Redirect } from 'react-router-dom'

interface AppProps {
  children?: any
  myAppStore: any
  myAppActions: any
};

class App extends React.Component<RouteComponentProps<{}> & AppProps>
{
  constructor(props: RouteComponentProps<{}> & AppProps) {
  super(props);
 }

render() {
  return (
    <div className="App">
      <AppNavBar {...this.props}/>
      <Switch>

        // This component gets both Router props and my props
        <Route path="/c1" default={true} exact={true} render={()=>{return( 
           <MyComponentOne {...this.props}/>)} } />

        // This component only gets Router props
        <Route path="/c2" {...this.props} exact={true} component={MyComponentTwo } />

        </Switch>
        <Redirect from="/" to="/c1"/>
      </div>
    );
  }
}

... Do redux stuff ..
// ApplicationProps and ApplicationActions are mapped redux props and thunks.

const connector = connect(ApplicationProps,ApplicationActions);
export default connector<any>(withRouter(App));

这是我的 index.tsx 渲染

  <Provider store={MyStore}>
  <BrowserRouter basename="/">
  <App/>
  </BrowserRouter>
  </Provider>

【讨论】：

【解决方案2】：

好像是打字问题，

如果您使用的是 TypeScript 2.4.1，请确保您使用的是 @types react 的那些版本。

"@types/react": "15.0.35",
"@types/react-dom": "15.5.1",

【讨论】：

好的，我更新了组件。现在我只留下了这个：[at-loader] 中的错误 ./src/config/routes.tsx:2:25 TS2305: Module '"E:/Web /TS/HelloWorld/node_modules/@types/react-router/index"' 没有导出的成员 'hashHistory'。 [at-loader] ./src/config/routes.tsx:2:38 TS2305 中的错误：模块“E:/Web/TS/HelloWorld/node_modules/@types/react-router/index”没有导出成员'索引路由'。
看看这个问题：github.com/DefinitelyTyped/DefinitelyTyped/issues/11514 ,,，也许安装 @types/history 也可以解决你的问题
谢谢。但这无济于事