将React组件作为道具

Question

我试图将一个组件作为道具传递，以生成经过身份验证的路由，但在工作过程中，我试图在文档中搜索如何做到这一点或在web中搜索，但不幸的是，我没有找到。这是我的组件

import { useSelector } from "react-redux"
import { Redirect, Route as ReactRoute } from "react-router-dom/cjs/react-router-dom.min"
export const Route = ({isPrivate=false, Component, ...rest}) =>{
const { acessToken } = useSelector(store=>store)
return(
<ReactRoute  {...rest} render={()=> isPrivate === !!acessToken ? <Component/> : <Redirect to={isPrivate ? '/' : '/dashboard'}/>} />
)
}

有人能给我一个提示吗？

Answer 1

我理解你想要实现的目标。

function PrivateRoute ({isPrivate=false, component: Component, ...rest}) {
const { acessToken } = useSelector(store=>store)
return (
<Route
{...rest}
render={(props) => isPrivate === !!acessToken 
? <Component {...props} />
: <Redirect to={isPrivate ? '/' : '/dashboard'}/>}
/>
)
}

这里有一个很好的例子：

如何在React Router 4中实现经过身份验证的路由？

Answer 2

当您想将组件作为道具传递时，可以使用下面的方法

export const Route = (Component) => {
return (props) => {
return <Component {...props} {...resourceProps} />;
};
};