Использование параметров URL в защищенных маршрутах в React + Firestore - PullRequest
Новая
       7

Использование параметров URL в защищенных маршрутах в React + Firestore

0 голосов
/ 28 мая 2020

Я создаю приложение с функциями группы, и я хочу ограничить доступ к группе в зависимости от того, указан ли пользователь внутри поля в документе хранилища данных или нет. Идентификатор группы передается через параметр URL (blahblah.com/groups/:id), и я хочу иметь доступ к этому параметру идентификатора в моем настраиваемом маршруте. С помощью приведенного ниже кода я получаю TypeError: Cannot read property 'params' of undefined. 

 <Router>
   <Switch>
     <GroupRoute exact path = "/groups/:id" component = {GroupDash}/>
     <PrivateRoute exact path = "/UserProfile" component = {UserProfile}/>
   </Switch>
 </Router>

Другой код 

export const GroupRoute = ({component: RouteComponent, match, ...rest}) => {
    const {currentUser} = useContext(AuthContext);
    const groupID = match.params.id;
    let validRoute = false;
    let members  = [];
    const groupRef = db.collection('Groups').doc(groupID)
    groupRef.get().then(snapshot => {
            let data = snapshot.data()
            let temp = data.groupMembers
            temp.forEach(element => {
                members.push(element.uid)
            })
            validRoute = members.includes(currentUser.uid);
        }
    )
    return (
        <Route
            {...rest}
            render= {routeProps => validRoute ? (<RouteComponent{...routeProps}/>):(<Redirect to = {"/UserDash"}/>)}
        />
    )

}

Как мне получить доступ к параметру id внутри компонента GroupRoute?

1 Ответ

1 голос
/ 28 мая 2020

Match Param доступен для GroupRoute только после его рендеринга с помощью Route, и он также не будет напрямую доступен в компоненте GroupRoute.

Также вы должны отметить, что вы пытаетесь написать асинхронный c код непосредственно в рендере, что неверно.

Одним из решений является запись этого logi c во внутреннем компонент, отображаемый на маршруте, как показано ниже 

const GroupRouteInner = ({RouteComponent, match, history, ...rest}) => {
    const {currentUser} = useContext(AuthContext);
    const [loading, setLoading] = true;
    const groupID = match.params.id;

    let members  = [];
    useEffect(() => {
       const groupRef = db.collection('Groups').doc(groupID)
        groupRef.get().then(snapshot => {
            let data = snapshot.data()
            let temp = data.groupMembers
            temp.forEach(element => {
                members.push(element.uid)
            })
            let validRoute = validRoute = members.includes(currentUser.uid);
            if(!validRoute) {
                history.push('/UserDash');
            }
            setLoading(false);
        })
    }, [groupID])

    if(loading) return <div>Loading...</div>
    return <RouteComponent match={match} history={history} {...rest} />
}
export const GroupRoute = ({component: RouteComponent, ...rest}) => {

    return (
        <Route
            {...rest}
            component={(rProps) => <GroupRouteInner {...rProps} RouteComponent={RouteComponent}/>}
        />
    )

}
...