如何将 React 路由器功能转换为 Typescript？

Question

我开始在 React 项目上工作，使用 react-router-dom 并且客户端需要将项目代码转换为 Typescript

我建立2个文件夹“RouteWrapper.js”和“ProviderRoutes.js”

1-“RouteWrapper.js”

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Redirect } from 'react-router-dom';

export default function RouteWrapper({
  component: Component,
  isPrivate,
  ...rest
}) {
  const signed = false;

  if (!signed && isPrivate) {
    return <Redirect exact to="/signin" />;
  }

  if (signed && !isPrivate) {
    return <Redirect to="/" />;
  }

  return (
    <Route {...rest} component={Component} />
  );
}

RouteWrapper.propTypes = {
  isPrivate: PropTypes.bool,
  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
    .isRequired,
};

RouteWrapper.defaultProps = {
  isPrivate: false,
};

2-“ProviderRoutes.js”

import React from 'react';
import { Switch } from 'react-router-dom';

// Components
import Route from './RouteWrapper';
import Authentication from '../Layouts/Authentication/Authentication.Layout';
import ChatApplication from '../Layouts/ChatApplication/ChatApplication.Layout';

export default function ProviderRoutes() {
  return (
    <Switch>
        <Route exact path={["/signin", "/signup", "/reset-password"]} component={Authentication} />
        <Route path="/" component={ChatApplication} isPrivate />
    </Switch>
  )
}

Answer 1

我相信问题主要出在RouteWrapper。首先，假设您不再想使用 prop 类型，因为现在 TypeScript 在编译时检查类型。

这些是基础：

• React 使用module.exports = React 导出。这意味着技术上正确的导入方式 反应是import * as React from 'react';。或者，您可以将"esModuleInterop": true 设置为 tsconfig.json。
• React 组件的返回类型为React.ReactElement。

也可以使用解构在功能组件中分配简单的默认道具。

对于<RouteWrapper />具体component是从props中提取出来的，然后传递给 <Route /> 以及其他道具。这意味着它也可以包含在其余的道具中。

由于其余的 props 被传递给 <Route />，<RouteWrapper /> 的 props 类型应该 从react-router-dom扩展RouteProps。

RouteWrapper 看起来像这样：

import * as React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';

interface RouteWrapperProps extends RouteProps {
  isPrivate: boolean;
}

export default function RouteWrapper({
  isPrivate = false,
  ...rest
}: RouteWrapperProps): ReactElement {
  const signed = false;

  if (!signed && isPrivate) {
    return <Redirect exact to="/signin" />;
  }

  if (signed && !isPrivate) {
    return <Redirect to="/" />;
  }

  return <Route {...rest} />;
}

如果你真的想使用propTypes或defaultProps，可以使用React.FC添加类型安全。

import * as PropTypes from 'prop-types';
import * as React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';

interface RouteWrapperProps extends RouteProps {
  isPrivate: boolean;
}

const RouteWrapper: React.FC<RouteWrapperProps> = ({ isPrivate, ...rest }) => {
  const signed = false;

  if (!signed && isPrivate) {
    return <Redirect exact to="/signin" />;
  }

  if (signed && !isPrivate) {
    return <Redirect to="/" />;
  }

  return <Route {...rest} />;
};

RouteWrapper.propTypes = {
  isPrivate: PropTypes.bool,
};

RouteWrapper.defaultProps = {
  isPrivate: false,
};

export default RouteWrapper;

注意使用react-router 编写路由的首选方式是使用子级，而不是 component道具。

import * as React from 'react';
import { Switch } from 'react-router-dom';

// Components
import RouteWrapper from './RouteWrapper';
import Authentication from '../Layouts/Authentication/Authentication.Layout';
import ChatApplication from '../Layouts/ChatApplication/ChatApplication.Layout';

export default function ProviderRoutes(): React.ReactElement {
  return (
    <Switch>
      <Route exact path={['/signin', '/signup', '/reset-password']}>
        <Authentication />
      </Route>
      <Route isPrivate path="/">
        <ChatApplication />
      </Route>
    </Switch>
  );
}

这应该可以帮助您开始转换应用程序的其余部分。 :)