Как передать реквизиты дочерним компонентам при использовании защищенных маршрутов?

Question

В настоящее время я разрабатываю «Систему бронирования билетов на поезд» с использованием 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.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}/>

Answer 1

Вы можете просто передать реквизит компоненту 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"