Question

我的应用程序需要用户进行身份验证才可以访问特定的路线。对于这一点，我想跟随反应，路由器auth-workflow example

routes / index.js

 // Private Route
 import PrivateRoute from "../containers/PrivateRoute";

 export default (
     <Switch>
         <Route
             path="/login"
             component={Login}
             exact={true}/>
         <Route
             path="/changePassword"
             component={ChangePassword}
             exact={true}/>
         <PrivateRoute
             path="/groups"
             component={ListGroups}
             exact={true}/>
         <Route
             path="/verify"
             component={VerificationCode}
             exact={true}/>
         <Route component={NoMatch}/>
     </Switch>
);

容器/专用路由

import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import PrivateRoute from "../routes/PrivateRoute";

const mapStateToProps = (state) => {
    return {
        jwtTokens: state.auth.jwtTokens,
        email: state.auth.email,
        isAuthenticated: state.auth.isAuthenticated
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({}, dispatch);
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PrivateRoute);

路由/ PrivateRoute.js

export default function PrivateRoute({ component: Component, ...rest }) {
    return (
        <Route
            {...rest}
            render={(props) => {
                return (props.isAuthenticated) ? (
                    <Component {...props} />
                ) : (
                    <Redirect
                        to={{
                            pathname: "/login",
                            state: {
                                from: props.location
                            }
                        }}
                    />
                );
            }}
        />
    );
}

在Chrome DevTools中进行调试时，进入render函数时，无法像在rest中那样获得完整的值。下面截图表示我的调试在Chrome和值I可以在每个阶段看到：

在上图中，我可以看到这些值； jwtTokens，isAuthenticated和email。据以下示例所知，如何在rest上使用传播运算符是如何将值作为参数传递给render的。下一个屏幕截图显示情况并非如此：

我能够简单地使用rest PARAM访问的属性，但不应该被我很容易地能够从访问相同的值props，以及？

Answer 1

您用来渲染Route的{{1}}的渲染回调不会转发Component从外部接收到的道具。它仅包含路由的Route，location和match。您可能想要做的是将params传播到rest中，而不是将<Component />用作Route，将不会使用其中任何一个，也不会期望这些道具：< / p>

Route

出于相同的原因，您还需要检查export default function PrivateRoute({ component: Component, ...rest }) { return ( <Route render={(props) => { return (rest.isAuthenticated) ? ( <Component {...props} {...rest} /> {/* add rest here instead */} ) : ( <Redirect to={{ pathname: "/login", state: { from: props.location } }} /> ); }} /> ); }而不是rest.isAuthenticated。 props.isAuthenticated不会出现在传递给isAuthenticated回调的道具中。

Also see in the react-router docs about Route props关于将哪些道具传递给render回调：

路线道具

所有三个render methods将通过相同的三个路线道具


match

location

history

反应路由器渲染没有得到道具

1 个答案: