在 React + Firestore 的受保护路由中使用 URL 参数

Question

我正在创建一个具有组功能的应用程序，并且我想根据是否在 firestore 文档的字段内指定用户来限制对组的访问。 该组的 ID 通过 URL 参数(blahblah.com/groups/:id)传入，我希望能够在我的自定义路由中访问该 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"}/>)}
        />
    )

}

如何访问 GroupRoute 组件中的 id 参数？

Answer 1

Match Param 只有在被 Route 渲染后才可用于 GroupRoute，而且它也不能在 GroupRoute 组件中直接访问。

此外，您必须注意，您正在尝试直接在渲染中编写异步代码，这是不正确的。

一种解决方案是将此逻辑写入在如下路径呈现的内部组件中

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}/>}
        />
    )

}