Cuando paso algunos componentes a un componente de Route , aparece un error del compilador de TS:
Escriba '{ principal: tipo de componente principal; barra lateral: tipo de componente de barra lateral; }' no se puede asignar al tipo 'RouteComponents'. La propiedad 'barra lateral' es incompatible con la firma de índice. El tipo 'typeof SidebarComponent' no se puede asignar al tipo 'ReactType'. El tipo 'typeof SidebarComponent' no se puede asignar al tipo 'StatelessComponent'. El tipo 'typeof SidebarComponent' no proporciona ninguna coincidencia para la firma '(props: any, context?: any): ReactElement'
Intenté construir correctamente un objeto RouteComponents , pero tuve que modificar el index.d.ts react-router de reacción para exportar la definición de RouteComponents ya que solo se exporta RouteComponent , y todavía no me gustó la expresión. ¿Dónde puedo averiguar cómo se supone que debe verse un objeto RouteComponents ?
Aquí está el archivo routes.tsx simple:
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 routesComo mencioné, también lo probé de la siguiente manera:
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> ) } La parte components={indexRouteComponents} no tiene un error, pero crear el objeto indexRouteComponents es un error (el mismo error que el anterior, porque no es un objeto RouteComponents correcto)
¿Cuál es la forma correcta de configurar los componentes del react-router usando Typescript?
Editar: aquí hay problemas de Github relacionados con esto: https://github.com/ReactTraining/react-router/issues/4317https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13689
const AppRouter = [ { main: MainComponent, exact: true, path: "/", sidebar: SidebarComponent, }, { main: OtherMainComponent, exact: true, path: "/add", sidebar: SidebarComponent, }];
Y en su componente principal:
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> ) }