Javascript 如何在不忽略重定向的情况下将道具传递到专用路由
我有一个私有路由组件,如果我有用户,它将打开布局页面,如果没有,它将重定向到登录页面的登录页面路由。问题是我的应用程序页面上有一个函数被我的布局页面调用,所以我把它作为道具传递给布局页面,就像这样Javascript 如何在不忽略重定向的情况下将道具传递到专用路由,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我有一个私有路由组件,如果我有用户,它将打开布局页面,如果没有,它将重定向到登录页面的登录页面路由。问题是我的应用程序页面上有一个函数被我的布局页面调用,所以我把它作为道具传递给布局页面,就像这样 <PrivateRoute> <Layout send_id={send_id}/> </PrivateRoute> 但当我这样做时,它会忽略私有路由中的重定向 export default function PrivateRoute({
<PrivateRoute>
<Layout send_id={send_id}/>
</PrivateRoute>
但当我这样做时,它会忽略私有路由中的重定向
export default function PrivateRoute({component :Component, ...rest}) {
const {currentUser} = useAuth()
console.log({currentUser})
return (
<Route
{...rest}
render={props=>{
return currentUser ? <Component {...props}/> :<Redirect to="/landingPage" />
}}
>
</Route>
)
导出默认函数PrivateRoute({component:component,…rest}){
const{currentUser}=useAuth()
console.log({currentUser})
返回(
{
返回当前用户?:
}}
>
)
}
但是,当我在应用程序页面上更改路径,使其恢复到添加该功能之前的状态时,它工作得非常好
<PrivateRoute exact path="/" component = {Layout}/>
将组件更改为子字段,这是子道具,而不是组件道具
export default function PrivateRoute({children :Component, ...rest}) {
const {currentUser} = useAuth()
console.log({currentUser})
return (
<Route
{...rest}
render={props=>{
return currentUser ? <Component {...props}/> :<Redirect to="/landingPage" />
}}
>
</Route>
)
导出默认函数PrivateRoute({children:Component,…rest}){
const{currentUser}=useAuth()
console.log({currentUser})
返回(
{
返回当前用户?:
}}
>
)