React+TypeScript中如何展示组件传参及设置可选参数？

嘿，作为刚上手React+TypeScript的新手，遇到路由参数的问题完全是情理之中的！我来帮你把这两个问题都捋清楚～

一、设置路由可选参数 #

你之前尝试用(/:id)的方式是不对的，React Router（从你的代码风格来看应该是v5版本）里，要把参数设为可选，只需要在参数名称后面加上?就可以了。修改后的路由代码应该是这样：

// routes.tsx
import { Switch, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';

export const routes = (
  <Layout>
    <Switch>
      {/* 给id加上?，表示该参数可选 */}
      <Route path='/home/:id?' component={Home} />
    </Switch>
  </Layout>
);

这样设置后，不管是访问/home还是/home/123，Home组件都能正常渲染啦。

二、在TypeScript组件中访问路由参数 #

因为用了TypeScript，我们需要给组件的props定义明确的类型，这样既能获得类型提示，也能避免类型错误。你可以按照下面的方式来写Home组件：

// Home.tsx
import React from 'react';
// 导入React Router的类型定义
import { RouteComponentProps } from 'react-router-dom';

// 定义路由参数的类型，id是可选的字符串
interface HomeParams {
  id?: string;
}

// 组件的props类型继承自RouteComponentProps，泛型传入我们定义的参数类型
type HomeProps = RouteComponentProps<HomeParams>;

const Home: React.FC<HomeProps> = (props) => {
  // 从match.params里获取id，因为是可选的，所以可能为undefined
  const { id } = props.match.params;

  return (
    <div>
      <h1>Home Page</h1>
      {/* 处理id不存在的情况 */}
      {id ? <p>当前ID: {id}</p> : <p>没有传入ID参数</p>}
    </div>
  );
};

export default Home;

额外说明 #

• 如果你的项目用的是React Router v6，写法会略有不同（比如用useParams钩子），但从你的代码结构来看，应该是v5版本，上面的代码完全适用。
• 因为id是可选参数，所以在组件里一定要处理它为undefined的情况，避免出现运行时错误，TypeScript也会帮你检查这一点哦。

内容的提问来源于stack exchange，提问作者Prasaad Patil