Question

我已经在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的方法。

我想念什么吗？

Answer 1

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

在反应中带有动态URL的私人路线

1 个答案: