我目前正在使用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;
这就是我使用受保护的路线进行导航
<ProtectedRoute exact path="/Home/AboutUs" component={AboutUs}/>
答案 0 :(得分:0)
您可以将道具传递到ProtectedRoute
组件。
即
<ProtectedRoute exact page="Home" path="/Home/AboutUs" component={AboutUs}/>
要在组件中获取页面道具
自从您进行过结构调整。
const ProtectedRoute = ({component: Component, ...rest}) => { ..... }
除component
道具外,其余的道具在点差运算符之后分配给变量rest
。
因此,您可以从作为对象的变量rest
中获取道具。
<Component {...props} pageProps={rest.page} /> // pageProps="Home"