Reactjs 如何在React+；Graphql？

我遇到了一个问题：在我得到一个可以更改密码的link（）后，我的后端为TriggerResetPassword函数中的链接生成resetToken。但我无法在React frontend APP.js中设置resetToken。如何让它工作

export const RESET_TOKEN = 'reset-token';

从“../constants”导入{GC\u用户\u ID，重置\u令牌}
const resetToken=localStorage.getItem（重置令牌）；

我的页面是：重置密码

const RESET_PASSWORD = gql 'mutation ($email:String!, $resetToken:String!, $password:String!) { passwordReset(email:$email , password: $password, resetToken: $resetToken){email,name, resetToken}}';
const { email, password, resetToken} = this.state;
        return(
                <FormControl >
                    < label htmlFor="password">Password </label>
                    <TextField type="text"  value={this.state.password} onChange={e => {this.setState({ password: e.target.value })
                        }}
                    /><br/>
                    <Mutation mutation={RESET_PASSWORD}  variables={{ email, password, resetToken } } onCompleted={() => this._confirm()}>
                        {mutation => (
                            <Button onClick={mutation}>Submit
                            </Button>)}
                    </Mutation>
                </FormControl>
        )

    }
    _confirm = async (resetToken) => {
        localStorage.getItem(resetToken);
        console.log(resetToken);
            this._saveUserData(resetToken);
        };
    _saveUserData = (id,resetToken) => {
        localStorage.setItem(RESET_TOKEN,resetToken);
        console.log(resetToken)   }
}

const RESET_PASSWORD=gql'mutation（$email:String！，$resetToken:String！，$PASSWORD:String！）{passwordReset（email:$email，PASSWORD:$PASSWORD，resetToken:$resetToken）{email，name，resetToken}}；
const{email，password，resetToken}=this.state；
返回(
密码
{this.setState（{密码：e.target.value}）
}}
/>

这个。_confirm（）}>
{突变=>(
提交
)}
)
}
_确认=异步（重置令牌）=>{
getItem（resetToken）；
console.log（resetToken）；
此._saveUserData（resetToken）；
};
_saveUserData=（id，resetToken）=>{
setItem（重置令牌，重置令牌）；
console.log（resetToken）}
}

和放弃密码：

const FORGOT_PASSWORD = gql 'mutation ($email:String!) { triggerPasswordReset(email:$email){ok, resetToken}';
        const { email,resetToken} = this.state;
        return(
                <FormControl >
                     < label htmlFor="password">Email </label>
                    <TextField type="text"  value={this.state.email} onChange={e => {this.setState({ email: e.target.value })
                    }}
                    /><br/>
                    <Mutation mutation={FORGOT_PASSWORD}  variables={{ email } } onCompleted={() => this._confirm()}>
                        {mutation => (
                            <Button onClick={mutation}>Submit
                            </Button>)}
                    </Mutation>
                </FormControl>   )

    }
    _confirm = async data => {
        const { resetToken } = this.state.forgotpassword;
        this._saveUserData(resetToken);
    };
    _saveUserData = (resetToken) => {
        localStorage.setItem(RESET_TOKEN, resetToken);
    }
} 

const遗忘密码=gql'突变（$email:String！）{triggerPasswordReset（email:$email）{ok，resetToken}'；
const{email，resetToken}=this.state；
返回(
电子邮件
{this.setState（{email:e.target.value}）
}}
/>

这个。_confirm（）}>
{突变=>(
提交
)}
)
}
_确认=异步数据=>{
const{resetToken}=this.state.forgotpassword；
此._saveUserData（resetToken）；
};
_saveUserData=（resetToken）=>{
setItem（重置令牌，重置令牌）；
}
} 

您的路线必须是动态的，有参数

@thanhtrong谢谢。我设置了它，但它说resetToken在未定义，甚至后端工作良好。export const RESET_TOKEN='RESET TOKEN'中的问题b是否可以解决；？首先，删除关键字

exact

。你在这里做动态参数，记得吗？然后，当您访问url时，它将路由到component ResetPassword。然后从URL读取令牌并通过

：resetToken

const FORGOT_PASSWORD = gql 'mutation ($email:String!) { triggerPasswordReset(email:$email){ok, resetToken}';
        const { email,resetToken} = this.state;
        return(
                <FormControl >
                     < label htmlFor="password">Email </label>
                    <TextField type="text"  value={this.state.email} onChange={e => {this.setState({ email: e.target.value })
                    }}
                    /><br/>
                    <Mutation mutation={FORGOT_PASSWORD}  variables={{ email } } onCompleted={() => this._confirm()}>
                        {mutation => (
                            <Button onClick={mutation}>Submit
                            </Button>)}
                    </Mutation>
                </FormControl>   )

    }
    _confirm = async data => {
        const { resetToken } = this.state.forgotpassword;
        this._saveUserData(resetToken);
    };
    _saveUserData = (resetToken) => {
        localStorage.setItem(RESET_TOKEN, resetToken);
    }
}