typescript 在打字稿中使用 react-router
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31747900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using react-router with typescript
提问by theycallmemorty
I'm attempting to port a small react app over to typescript.
我正在尝试将一个小型反应应用程序移植到打字稿上。
I'm encountering issues with react-router. I have the latest definitions from definitely type but the following code gives me errors:
我遇到了反应路由器的问题。我有绝对类型的最新定义，但以下代码给了我错误：
var routes:Router.Route = (
<Route name="root" path="/" handler={MyApp}>
<Route path="dashboard" handler={MyDash} />
<DefaultRoute handler={SomeSection} />
<NotFoundRoute handler={NotFoundPage} />
</Route>
);
Router.run(routes, function (Handler:React.Component<any, any>) {
React.render(<Handler/>, document.body);
});
These are the compilation errors I get:
这些是我得到的编译错误：
js/app.tsx(31,3): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Component<RouteProp, any>'.
js/app.tsx(32,5): error TS2605: JSX element type 'Component<RouteProp, any>' is not a constructor function for JSX elements.
js/app.tsx(47,5): error TS2605: JSX element type 'Component<DefaultRouteProp, any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Component<DefaultRouteProp, any>'.
js/app.tsx(49,5): error TS2605: JSX element type 'Component<NotFoundRouteProp, any>' is not a constructor function for JSX elements.
Property 'render' is missing in type 'Component<NotFoundRouteProp, any>'.
js/app.tsx(53,20): error TS2345: Argument of type '(Handler: Component<any, any>) => void' is not assignable to parameter of type '(Handler: RouteClass, state: RouterState) => void'.
Types of parameters 'Handler' and 'Handler' are incompatible.
Type 'Component<any, any>' is not assignable to type 'RouteClass'.
js/app.tsx(54,17): error TS2604: JSX element type 'Handler' does not have any construct or call signatures.
What is the correct way to initialize a set of react-router routes using typescript?
使用打字稿初始化一组反应路由器路由的正确方法是什么？
(I should clarify that I'm using a nightly typescript build which has support for JSX via the --jsx reactflag
（我应该澄清一下，我正在使用夜间打字稿构建，它通过--jsx react标志支持 JSX
回答by Ryan Cavanaugh
The root problem was some definitions in react-router not having an explicit render() method. This has been fixed (indirectly) by https://github.com/borisyankov/DefinitelyTyped/pull/5197
根本问题是 react-router 中的一些定义没有明确的 render() 方法。这已由https://github.com/borisyankov/DefinitelyTyped/pull/5197（间接）修复
Note that this code is incorrect:
请注意，此代码不正确：
Router.run(routes, function (Handler:React.Component<any, any>) {
React.render(<Handler/>, document.body);
});
It should be:
它应该是：
Router.run(routes, function (Handler: new() => React.Component<any, any>) {
React.render(<Handler/>, document.body);
});
Because Handleris a constructorfor a React component, not an instance of it.
因为Handler是React 组件的构造函数，而不是它的实例。
回答by curpa
Errors in the type definitions appears to be the cause. You can work around them by modifying the .d.tsfiles as follows:
类型定义中的错误似乎是原因。您可以通过.d.ts如下修改文件来解决这些问题：
In react.d.ts, remove renderfrom the JSX.ElementClassinterface
在react.d.ts，render从JSX.ElementClass界面中移除
interface ElementClass extends React.Component<any, any> {
}
In react-router.d.ts, change runmethod's routesparameter's type to React.ReactElement<RouteProp>
在 中react-router.d.ts，将run方法的routes参数类型更改为React.ReactElement<RouteProp>
function run(routes: React.ReactElement<RouteProp>, callback: RouterRunCallback): Router;
function run(routes: React.ReactElement<RouteProp>, location: LocationBase, callback: RouterRunCallback): Router;
回答by Xavier Méhaut
For making it running under typescript 1.6 with react-router, I've added the following code in the react-router.d.ts file :
为了让它在带有 react-router 的 typescript 1.6 下运行，我在 react-router.d.ts 文件中添加了以下代码：
interface RouterClass extends React.ComponentClass<any> {}
var Router: RouterClass;
//For Router
function createElement(
type: ReactRouter.RouterClass,
props: any,
...children: __React.ReactNode[]): ReactRouter.Router;
}
interface RouteProp {
name?: string;
path?: string;
handler?: React.ComponentClass<any>;
ignoreScrollBehavior?: boolean;
component?: React.ComponentClass<any>;
}
