react typescript如何配置routes.ts文件答案

【问题标题】：react typescript how to configure routes.ts filereact typescript如何配置routes.ts文件
【发布时间】：2020-10-24 02:39:04
【问题描述】：

我刚开始使用打字稿，所以不要生我的气。

我正在尝试配置 routes.ts 文件。但是我遇到了一堆错误。你能帮我解决一下吗：

在 AppPath 组件内部“类型'{路径：字符串;}'缺少类型'元素'中的以下属性：类型、道具、键”错误
在 AppRoutes 组件内部“类型'”/admin“'不可分配给类型'Switch'。”

import React, { FunctionComponent } from 'react';
import { Switch, Route, RouteComponentProps } from 'react-router';

import Admin from './admin/Admin';
import Imitator from './imitator/Imitator';

import ImitatorLayout from './admin/layout/index';
import AdminLayout from './imitator/layout';


type AppPathProps = {
  component: RouteComponentProps,
  layout: FunctionComponent,
  path:string
};

const AppPath = ({ component, layout, path }: AppPathProps): JSX.Element => {
  const Component = component;
  const Layout = layout;

  return (
    <Route
      path={path}
  render = {(props: RouteComponentProps) => (
  <Layout>
  <Component { ...props } />
  </Layout>
)}
/>
  );
};

const AppRoutes = () => (
  <Switch>
  <AppPath path= "/admin" component = { Admin } layout = { AdminLayout } />
    <AppPath path="/" component = { Imitator } layout = { ImitatorLayout } />
      </Switch>
);

export default AppRoutes;

【问题讨论】：

标签： reactjs typescript react-router

【解决方案1】：

除非有其他理由延长路线，否则您会这样做：

import { BrowserRouter, Switch, Route } from 'react-router-dom'

const Imitator: React.FC = props => {
   render <div>Imitator/div>
};

const Admin: React.FC = props => {
   render <div>App</div>
};

const AppRoutes = () => (<BrowserRouter>
   <Switch>
      <Route exact path="/" component={Imitator} />
      <Route exact path="/admin" component={Admin} />
   </Switch>
</BrowserRouter>);

【讨论】：