Javascript 将自定义道具传递给私有路由-反应类型脚本

我们有一个React组件

XYZ

，该组件具有特定的UI，需要根据安装该组件的路径隐藏/显示该UI

例如，如果路线为/show->，则应显示表格 如果路线为/hide->，则应隐藏表格

正在使用react路由器dom，但不希望使用历史记录中的状态。推送（…）

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

PS：我们在TS中使用私有路由，除非使用

any

，否则无法覆盖渲染方法

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 } }} />}
        />
    )
}

接口PrivateRouteProps扩展了RouteProps{
}
常量PrivateRoute:FunctionComponent=({
组件：组件，
休息
}) => {
如果（！组件）返回空值；
返回(
真的
？//在这里寻找传递自定义道具的方法
: }
/>
)
}

用法：

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

对于如何在此PrivateRoute中传递道具并将其传递给组件的任何帮助，我们将不胜感激。TIA

props 我假设额外的道具是已知的，可以作为道具传递给

PrivateRoute

组件

我们将

类型PrivateRouteProps

定义为一个泛型，它取决于

外部Props

的类型。它将把其他传递下来的道具作为一个道具名称为

extraProps

的对象

我们的

PrivateRouteProps

将接受所有正常的

路由操作

，除了

组件

，因为我们想用自己的定义覆盖它。我们版本的

组件

采用了典型的

路由组件道具

，也采用了

外部道具

（作为顶级道具）

用法 现在，当我们声明一个

privaterout

时，我们必须始终传递适当的额外道具

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

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

constrendernumber=（{n}:{n:number}）=>(
{n}
)
//渲染数字5

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 } }} />}
        />
    )
}

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

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