反应打字稿如何配置routes.ts文件

Question

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

我正在尝试配置route.ts文件。但是我遇到了很多错误。能否请他们帮忙：

1. 内部AppPath组件“类型'{path：string;}'缺少类型'元素'的以下属性：类型，道具，键”错误

无法将

2. 内部AppRoutes组件“类型'/ admin”'分配为类型“开关”。

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;

Answer 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>);