反应中具有动态 URL 的私有路由

Posted 2023-02-23

【中文标题】反应中具有动态 URL 的私有路由

【英文标题】：Private route with dynamic URL in react

【发布时间】：2020-07-12 14:12:42

【问题描述】：

我在 React 中构建了一个 PrivateRoute 组件，该组件采用给定的组件并在用户是否登录时呈现它。

export default function PrivateRoute(component: Component,...rest) 
return (
    <SessionContext.Consumer > 
        (context) => 

            const isLoggedIn = context

            return (
                <Route ...rest
                render = 
                    props =>
                    isLoggedIn ? ( 
                        <Component ...props />
                    ) : (
                        <Redirect to = "/login" / >
                    )
                
                />
            )
        
    
    </SessionContext.Consumer>
);

现在在 App.js 中，我像这样传递我的私有组件：

<PrivateRoute exact path="/dashboard" component=Dashboard />

现在的问题是当我想在 url 中传递参数时。这就是我为 Route 组件所做的：

<Route path="/user/:user_id" render=(props) =>
              <UserComponent user=props.match.params.user_id />
             />

不幸的是，这种语法在使用我的 PrivateRouter 时不起作用。

我尝试了其他几种方法，但找不到在我的 UserComponent 中获取 user_id 的方法。

我错过了什么吗？

【参考方案1】：

您的 PrivateRoute 使用道具 component。但是你通过render 传递组件。如果我正确理解你的问题。