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

В настоящее время я разрабатываю «Систему бронирования билетов на поезд» с использованием 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}/>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
451
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Другие вопросы по теме