В настоящее время я разрабатываю «Систему бронирования билетов на поезд» с использованием ReactJS. Поскольку для доступа к службам пользователям необходимо войти в систему, я использовал защищенные маршруты для рендеринга некоторых компонентов. Вместо использования стандартного . Пока я знаю, как отправлять реквизиты с помощью метода рендеринга. Я хочу знать, как отправлять реквизиты при использовании защищенных маршрутов. Поскольку метод рендеринга с этим не работает.
Это моя реализация защищенного маршрута.
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.info(auth.isAuthenticated())
return <Component {...props}/>
}
else{
return <Redirect to = {
{
pathname: '/',
state:{
from: props.location
}
}
} />
}
}} />
);
};
export default ProtectedRoute;
Вот как я использовал защищенный маршрут для навигации
<ProtectedRoute exact path = "/Home/AboutUs" component = {AboutUs}/>
Вы можете просто передать реквизит компоненту ProtectedRoute
.
то есть
<ProtectedRoute exact page = "Home" path = "/Home/AboutUs" component = {AboutUs}/>
Чтобы получить реквизиты страницы в компоненте
Поскольку вы использовали деструктурирование.
const ProtectedRoute = ({component: Component, ...rest}) => { ..... }
За исключением component
props, остальные реквизиты присваиваются переменной rest
после оператора распространения.
Таким образом, вы можете получить реквизиты из переменной rest
, которая является объектом.
<Component {...props} pageProps = {rest.page} /> // pageProps = "Home"