[英]How to pass Components into a react-router Route using Typescript?
When I pass in some Components to a Route
Component I get a TS compiler error: 当我将一些组件传递给
Route
组件时,我得到一个TS编译器错误:
Type '{ main: typeof MainComponent;
输入'{main:typeof MainComponent; sidebar: typeof SidebarComponent;
侧栏:typeof SidebarComponent; }' is not assignable to type 'RouteComponents'.
}'不能赋值为'RouteComponents'。 Property 'sidebar' is incompatible with index signature.
属性“侧边栏”与索引签名不兼容。 Type 'typeof SidebarComponent' is not assignable to type 'ReactType'.
类型'typeof SidebarComponent'不能分配给'ReactType'类型。 Type 'typeof SidebarComponent' is not assignable to type 'StatelessComponent'.
类型'typeof SidebarComponent'不能分配给'StatelessComponent'类型。 Type 'typeof SidebarComponent' provides no match for the signature '(props: any, context?: any): ReactElement'
类型'typeof SidebarComponent'不提供签名'匹配'(props:any,context?:any):ReactElement'
I've tried to correctly construct a RouteComponents
object, but I had to modify the react-router
's index.d.ts
to export the RouteComponents
definition as only RouteComponent
is exported, and it still didn't like the expression. 我试图正确地构建
RouteComponents
反对,但我不得不修改react-router
的index.d.ts
到出口RouteComponents
定义只RouteComponent
出口,它仍然不喜欢表达。 Where can I find out what a RouteComponents
object supposed to look like? 我在哪里可以找到
RouteComponents
对象应该是什么样子?
Here is the simple file routes.tsx
: 这是简单的文件
routes.tsx
:
import * as React from 'react'
import { IndexRoute, Route } from 'react-router'
import App from './components/App'
import MainComponent from './components/MainComponent'
import OtherMainComponent from './components/OtherMainComponent'
import SidebarComponent from './components/SidebarComponent'
const routes = () => {
return (
<Route path="/" component={App}>
<IndexRoute components={{ main: MainComponent, sidebar: SidebarComponent }} />
<Route path="/add" components={{ main: OtherMainComponent, sidebar: SidebarComponent }} />
</Route>
)
}
export default routes
As I mentioned, I tried it the following way too: 正如我所提到的,我也尝试了以下方式:
const indexRouteComponents: RouteComponents = {
main: MainComponent,
sidebar: SidebarComponent
}
const routes = () => {
return (
<Route path="/" component={App}>
<IndexRoute components={indexRouteComponents} />
<Route path="/add" components={{ main: OtherMainComponent, sidebar: SidebarComponent }} />
</Route>
)
}
The components={indexRouteComponents}
part does not have an error, but creating the indexRouteComponents
object is an error (The same error as above, because it's not a correct RouteComponents
object) components={indexRouteComponents}
部分没有错误,但是创建indexRouteComponents
对象是一个错误(与上面相同的错误,因为它不是正确的RouteComponents
对象)
What is the correct way to set up the react-router
Components using Typescript? 使用Typescript设置
react-router
组件的正确方法是什么?
Edit: here are Github issues related to this: https://github.com/ReactTraining/react-router/issues/4317 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13689 编辑:以下是与此相关的Github问题: https : //github.com/ReactTraining/react-router/issues/4317 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13689
const AppRouter = [
{
main: MainComponent,
exact: true,
path: "/",
sidebar: SidebarComponent,
},
{
main: OtherMainComponent,
exact: true,
path: "/add",
sidebar: SidebarComponent,
}
]; ]。
And in your main component: 在您的主要组件中:
public render() {
return (
<Router>
<div className={"sidebar"}>
{AppRouter.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}
</div>
<div className={"content"}>
{AppRouter.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</Router>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.