如何解决如何使用 next.js
请参阅下面的编辑。
我在我的项目中遇到了重置密码的问题。我可以向用户发送一封电子邮件，其中包含用于使用散列令牌和内部用户 ID 重置密码的链接。
99% 的代码已经完成（后端和前端），唯一的问题是我无法在客户端获取散列令牌和 id 以调用正确的 API 端点等显示用户重置密码的表单，并具有检查令牌、到期日期等的逻辑。
我没有使用 react-router-dom（尽管我尝试仅将它用于这条路线，但无论如何我都无法使其正常工作）。
`http://localhost:3000/reset-password-form/${hashedResetToken}/${user._id}`
我的路线如下：
router.patch('/reset-password-form/:resetToken/:userId',shopController.resetPasswordPage);
现在，我尝试像这样将 react-router-dom 的功能添加到页面文件夹内的 reset-password-form.js 文件中，如下所示：
import React from 'react';
import ResetPasswordPage from '../components/ResetPasswordPage';
import { browserRouter as Router,Switch,Route} from 'react-router-dom';
const resetPasswordPage = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/reset-password-form/:resetToken/:userId" component={ResetPasswordPage} />
</Switch>
</Router>
<ResetPasswordPage />
</>
)
}
export default resetPasswordPage;
而且，问题是我无法调用正确的 API 端点，因为我无法获得所需的参数。组件看起来像这样（它只是几行代码，而不是整个组件）：
fetchData = e => {
e.preventDefault();
const resetToken = this.props.match.params.resetToken;
const userId = this.props.match.params.userId;
fetch(`http://localhost:8090/reset-password-form/${resetToken}/${userId}`,{
如何在客户端获取这些参数？
编辑：
所以现在我按照建议使用 next/router。
首先，我注意到如果令牌被 / 内的 next/router 散列将无法读取令牌，并且它给我一个 404 页面（可能是因为它认为有超过2 个参数？）。我尝试在没有 / 的情况下调整路线但没有成功。
出于调试目的，我进入 pages 文件夹的 reset-password-form/[resetToken]/[userId].js 如下所示：
const resetPasswordPage = () => {
const router = useRouter();
return (
<>
<p>user id: {router.query.userId}</p>
<p>token: {router.query.resetToken}</p>
</>
)
}
这给了我散列令牌（仅当它在内部没有 / 的情况下生成，否则我会得到一个 404 页面）和 userId。
调试后，我删除了 2 个 p 标签，并在 return 中传递了 ResetPasswordPage 组件，将我需要的参数作为道具传递并像这样获取它们（ResetPasswordPage 组件):
fetchData = e => {
e.preventDefault();
const resetToken = this.props.resetToken;
const userId = this.props.userId;
fetch(`http://localhost:8090/reset-password-form/${resetToken}/${userId}`,{
但如果我这样做，我会得到 Error: React.Children.only expected to receive a single React element child。
如果我从 ResetPasswordPage 组件中删除其他 2 个子项，我想要的页面将被呈现（同样，仅当生成的令牌没有 / 时）。有没有办法渲染其他 2 个孩子（我在 3 个组件之间有 > 标签）？这些对于页面的工作很重要（它们会显示导航链接和错误/成功消息）。
如何避免这样一个事实：如果令牌被 / 散列，用户将获得 404 页面？
编辑 2.0
ResetPasswordPage 组件的完整代码：
import React,{ Component } from 'react';
import Link from 'next/link';
import Form from '../components/styles/Form';
import logo from '../components/styles/logo';
import MessageStyles from '../components/styles/MessageStyles';
class ResetPasswordPage extends Component {
state = {
loading: false,message: null,password: '',confirmPassword: '',}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
}
fetchData = e => {
e.preventDefault();
const resetToken = this.props.resetToken;
const userId = this.props.userId;
fetch(`http://localhost:8090/reset-password-form/${resetToken}/${userId}`,{
method: 'PATCH',headers: {
'Accept': 'application/json','Content-Type': 'application/json',},credentials: 'include',body: JSON.stringify({
password: this.state.password,confirmPassword: this.state.confirmPassword,})
})
.then(res => {
return res.json();
})
.then(resData => {
console.log(resData);
})
.then(() => {
setTimeout(() => {
window.location.replace('/auth/login');
},3000);
})
.catch(err => console.log(err))
}
render() {
return (
<>
<logo> // by removing only the logo component with the link inside I solved the issue of Error: React.Children.only expected to receive a single React element child
<Link href="/shop" />
</logo>
<MessageStyles><p id="message-test">{this.state.message}</p></MessageStyles>
<Form onSubmit={this.fetchData}>
<fieldset aria-busy={this.state.loading} disabled={this.state.loading}>
<h1>Chang{this.state.loading ? 'ing' : 'e'} Your Password</h1>
<label htmlFor="password">
<input
name="password"
type="password"
onChange={this.handleChange}
value={this.state.password}
className={this.state.password.length < 5 ? 'invalid' : '' }
/>
</label>
<label htmlFor="confirm password">
<input
name="confirmPassword"
type="password"
onChange={this.handleChange}
value={this.state.confirmPassword}
className={this.state.password !== this.state.confirmPassword ? 'invalid' : '' }
/>
</label>
<button>Chang{this.state.loading ? 'ing' : 'e'} Your Password</button>
</fieldset>
</Form>
</>
)
}
}
export default ResetPasswordPage;
因此，如果我删除 logo 并且 MessageStyle 页面被呈现。
解决方法
所以为了解决这个问题，我做了以下事情：
将文件 reset-password-form.js 重命名为 pages 文件夹，如“reset-password-form/[resetToken]/[userId].js”。
reset-password-form/[resetToken]/[userId].js 看起来像这样：
import React from 'react';
import { useRouter } from 'next/router';
import ResetPasswordPage from '../../../components/ResetPasswordPage';
const resetPasswordPage = () => {
const router = useRouter();
return (
<ResetPasswordPage userId={router.query.userId} resetToken={router.query.resetToken} />
)
}
export default resetPasswordPage;
进入ResetPasswordPage，我通过像这样从道具中获取我需要的参数：
resetToken = this.props.resetToken;
userId = this.props.userId;
对于令牌中的 / ，您需要对令牌 encodeURIComponent 和 decodeURIComponent 进行编码/解码
,Tms 给我发了这个链接，他说你遇到了这个问题。我不是专业人士，但尝试从 Route 组件中删除“精确”。由于它是一条动态路径，因此可能是触发问题的原因。
我记不太清了，但您可能也不需要自闭式 <ResetPasswordPage />。你已经在Route中通过了。（我想我也遇到了类似的问题）
我正在回答关于您的 / 问题的问题，因为您在一个帖子中有多个编辑和多个问题。
您可以使用 encodeURIComponent 对包含“/”的令牌进行编码。
const token = `token1with/init`
console.log(`token`,token)
console.log(`encodeUri`,encodeURIComponent(token))您应该在通过电子邮件发送令牌之前对令牌进行编码。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
