Javascript 使用受保护的路由时，如何将道具传递给子组件？

我目前正在使用ReactJS开发一个“火车票预订系统”。因为用户应该登录以访问服务，所以我使用了受保护的路由来呈现一些组件。而不是使用默认值。到目前为止，我知道如何使用render方法发送道具。我想知道在使用受保护的路线时如何发送道具。因为render方法不适用于此

这是我对受保护路由的实现

import React from 'react';  
import auth from './auth';  
import {Route, Redirect} from 'react-router-dom';  

const ProtectedRoute = ({component: Component, ...rest}) => {  

    return(  
        <Route {...rest} render={props => {  

            if(auth.isAuthenticated()){  
                console.log(auth.isAuthenticated())  
                return <Component {...props}/>  
            }  
            else{  
                return <Redirect to={  
                    {  
                        pathname: '/',  
                        state:{  
                            from: props.location  
                        }  
                    }  
                } />  
            }  
            }} />  
    );  

};  

export default ProtectedRoute; 

从“React”导入React；
从“/auth”导入身份验证；
从“react router dom”导入{Route，Redirect}；
const ProtectedRoute=（{component:component，…rest}）=>{
报税表（
{  
如果（auth.isAuthenticated（））{
console.log（auth.isAuthenticated（））
返回
}  
否则{
返回
}  
}} />  
);  
};  
导出默认的ProtectedRoute；

这就是我如何使用受保护的路线进行导航

---

您只需将道具传递给

ProtectedRoute

组件即可

i、 e

除了

组件

props之外，其余的props都分配给变量

rest

，位于扩展运算符之后

因此，您可以从对象变量

rest

获取道具

<Component {...props} pageProps={rest.page} />  // pageProps="Home"

//pageProps=“主页”

const ProtectedRoute = ({component: Component, ...rest}) => { ..... }

<Component {...props} pageProps={rest.page} />  // pageProps="Home"