BrowserRouter 与打字稿反应 [英] BrowserRouter in react with typescript

本文介绍了BrowserRouter 与打字稿反应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!


我在 Reactjs + 类型脚本中有一个简单的应用程序.我正在尝试使用 react-router-dom 中的 BrowserRouter.


import * as React from "react"从./popular"导入{流行}import { BrowserRouter as Router, Route } from "react-router-dom"导出接口 AppProp {}导出接口 AppState {}导出类 App 扩展了 React.Component{使成为() {返回 (

<路由器><Route path='/popular' component={Popular}/></路由器>



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

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



BR 纳达夫


我能够将 BrowserRouter 与 typescript 一起使用,并且能够将历史道具和我的 redux 道具/thunk 传递给我的组件.关键是在应用程序级别使用withRouter".我还必须使用带有Route"的渲染属性来获取我的道具.我现在可以在我的组件以及我的道具和 thunk 中使用this.props.history.push("/url1")"和this.props.history.replace("/url2")".传播符号也很摇滚.

import { RouteComponentProps, withRouter,来自'react-router-dom'的开关、路由、重定向}界面 AppProps {孩子?:有我的应用商店:任何myAppActions: 任何};类 App 扩展了 React.Component&应用道具>{构造函数(道具:RouteComponentProps<{}> & AppProps){超级(道具);}使成为() {返回 (<div className="应用程序"><AppNavBar {...this.props}/><开关>//该组件同时获取 Router props 和 my props<Route path="/c1" default={true} exact={true} render={()=>{return(<MyComponentOne {...this.props}/>)} }/>//该组件只获取Router props<Route path="/c2" {...this.props} exact={true} component={MyComponentTwo }/></开关><重定向自="/"到="/c1"/>

);}}...做redux的东西..//ApplicationProps 和 ApplicationActions 是映射的 redux props 和 thunk.const connector = connect(ApplicationProps,ApplicationActions);导出默认连接器(withRouter(App));

这是我的 index.tsx 渲染

 <BrowserRouter basename="/"><应用程序/></BrowserRouter></提供者>

I have simple application in Reactjs + type script. I'm trying to use the BrowserRouter from react-router-dom.

This is my code :

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'>
                    <Route path='/popular' component={Popular} />

export default App

I'm geting the following errors:

ERROR in [at-loader] ./node_modules/@types/react-router-dom/index.d.ts:55:25 TS2314: Generic type 'Component' requires 2 type argument(s).

ERROR in [at-loader] ./src/components/app.tsx:25:18 TS2604: JSX element type 'Router' does not have any construct or call signatures.

I search at google but nothing help.

someone has an idea ?

BR Nadav


I was able to use BrowserRouter with typescript and was able to pass both the history prop and my redux props/thunks down to my components. The key was to use 'withRouter' at the app level. I also had to use the render property with "Route" to get my props down. I can now use "this.props.history.push("/url1")" and "this.props.history.replace("/url2")" in my components as well as my props and thunks. Also the spread notation rocks.

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) {

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

        // 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 } />

        <Redirect from="/" to="/c1"/>

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

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

This is my index.tsx render

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

这篇关于BrowserRouter 与打字稿反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

登录 关闭
发送“验证码”获取 | 15天全站免登陆