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

【问题标题】：Private route with dynamic URL in react反应中具有动态 URL 的私有路由
【发布时间】：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 的方法。

我错过了什么吗？

【问题讨论】：

标签： reactjs routing react-router components

【解决方案1】：

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

【讨论】：