React路由器路由路径的TypeScript类型？

Question

我正在使用带有 TypeScript 的 React Router。如何将enum 用于path 属性？

enum paths = "page-1" | "page-2"

interface Props extends RouteComponentProps<MatchParams> {}

const App = () => {
  return (
    <Switch>
      <Route path="/page-1">
        <Page1 />
      </Route>
      <Route path="/page-2">
        <Page2 />
      </Route>
    </Switch>
  )

Answer 1

使用字符串枚举！

https://www.typescriptlang.org/docs/handbook/enums.html#string-enums

enum paths = {
  page1= "page-1"
  page2= "page-2"
}

const App = () => {
  return (
    <Switch>
      <Route path={paths.page1}>
        <Page1 />
      </Route>
      <Route path={paths.page2}>
        <Page2 />
      </Route>
    </Switch>
  )