将自定义道具传递给私有路由 - React Typescript

Question

我们有一个 React 组件XYZ ，它具有某些 UI，需要根据已安装组件的路由隐藏/显示。

例如，如果路线是/show -> 如果路线是/hide-> 它应该显示一个表格，如果路线是/hide-> 它应该隐藏表格。

正在使用 react-router-dom，但不想在 history.push(...) 中使用 state。

我正在寻找一种在定义路线时可以实现的解决方案，这样以后使用此路线的任何开发人员都不必担心维护 state。

PS：我们在 TS 中使用 Private Route，除非使用any方法，否则无法覆盖 render 方法。

interface PrivateRouteProps extends RouteProps {
}

const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({
    component: Component,
    ...rest
  }) => {
    if (!Component) return null;    
    return (
        <Route
            {...rest}
            render={(props) => true
                ? <Component {...props}/>  // looking for a way to pass custom props here
                : <Redirect to={{ pathname: '/', state: { from: props.location } }} />}
        />
    )
}

用法：

<PrivateRoute path='/show' component={XYZ} />

关于如何在此 PrivateRoute 中传递道具然后将其传递给组件的任何帮助将不胜感激。TIA

Answer 1

道具

我假设额外的道具是已知的并且可以作为道具传递给PrivateRoute组件。

我们将type PrivateRouteProps定义为泛型，这取决于ExtraProps的类型。 它将附加传递的道具作为 object 使用道具名称extraProps 。

我们的PrivateRouteProps将接受除了component之外的所有普通RouteProps ，因为我们想用我们自己的定义覆盖它。 我们的component版本采用典型的RouteComponentProps和ExtraProps （作为顶级道具）。

type PrivateRouteProps<ExtraProps> = Omit<RouteProps, 'component'> & {
  component: ComponentType<RouteComponentProps & ExtraProps>
  extraProps: ExtraProps;
}

零件

在我们的render function 中，我们可以通过检查 props.match.path 的值来实现show / hide切换，该值RouteComponentProps props.match.path提供。

当我们调用Component时，我们将提供给render器的所有 props 以及我们传入的所有extraProps传递给PrivateComponent 。 我们根本不需要重写render的定义，我们只是在给定的基础上添加我们自己的额外道具。 如果我们不这样做，我们会收到错误，因为我们键入了Component ，因此它期望接收ExtraProps 。

我们的PrivateRoute是通用的，因此我们不会将组件本身键入为FunctionComponent ，而是键入 props。

const PrivateRoute = <ExtraProps extends {}>({
    component: Component,
    extraProps,
    ...rest
  }: PrivateRouteProps<ExtraProps>) => {
    if (!Component) return null;
    return (
        <Route
            {...rest}
            render={(props) => props.match.path.startsWith('/show')
                ? <Component {...extraProps} {...props}/>
                : <Redirect to={{ pathname: '/', state: { from: props.location } }} />}
        />
    )
}

用法

现在，当我们声明PrivateRoute时，我们必须始终传递适当的额外道具。

const RenderNumber = ({n}: {n: number}) => (
  <div>{n}</div>
)

<PrivateRoute path="/show/something" component={RenderNumber} extraProps={{n: 5}}/>
// renders the number 5

Typescript 游乐场链接