如何从反应页面重定向到表达页面
How to redirect from react page to express page
嘿,我正在寻找将 React 页面重定向到 Express 页面的方法。目的是在用户忘记密码时发送邮件。我尝试使用路由器,但它发送给我 'localhost:3000/forgot_password' 而不是 'localhost:3001/forgot_password'.
然而,这适用于我在注册部分提交的表单。为什么?
我的代码有点乱,所以我会评论重要的部分。
这是快递部分:
const bodyParser = require('body-parser')
const express = require('express')
const mysql = require('mysql')
const randomString = require('randomstring')
const bcrypt = require('bcrypt')
const app = express()
const router = express.Router()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
app.use((req, res, next) => {
req.db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '00000000',
database: 'Matcha'
});
next();
});
router.get('/users', (req, res) => {
req.db.query("SELECT * FROM Users;", (err, rows, fields) => {
if(err)
return(res.send(err) && console.log(err));
res.json(rows);
});
});
router.post('/check_signUp', (req, res) => {
console.log(req.body);
const saltRounds = 10;
const password = req.body.password;
bcrypt.hash(password, saltRounds, function(err, hashPassword) {
const randomKey = randomString.generate(15)
console.log(req.body.username, password, req.body.mail, randomKey)
req.db.query(`INSERT INTO Users (username, password, mail, randomKey) VALUES ('${req.body.username}', '${hashPassword}', '${req.body.mail}', '${randomKey}');`, (err, rows, fields) => {
if(err)
return(res.send(err) && console.log(err));
bcrypt.compare('ffffff', 'b07gWLRGjqGwKJzXx6Dt.CH00c0rRlioy8KdcWc4ze18LoL2YHeC', function(err, res) {
console.log(res)
});
res.redirect('/');
})
})
})
// HERE IS THE IMPORTANT PART. I need to go in this router.get
router.get('/change_password', (req, res) => {
res.send('OK');
});
// END OF THE IMPORTANT PART
app.use(router)
app.set('port', (process.env.PORT || 3001))
app.listen(app.get('port'), () => {
console.log(`Listening on ${app.get('port')}`)
})
这里是反应部分:
import React, { Component } from 'react';
import './SignIn.css';
import { BrowserRouter as Router, Link } from 'react-router-dom';
class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
valueUsername: '',
valuePassword: '',
users: [],
validLog: '_',
validMessage: '_'
};
this.changeUsername = this.changeUsername.bind(this);
this.changePassword = this.changePassword.bind(this);
this.submitForm = this.submitForm.bind(this);
this.checkMatch = this.checkMatch.bind(this);
}
async componentDidMount() {
const response = await fetch('/users')
const users = await response.json()
this.setState({users: users})
}
changeUsername(event) {
this.setState({valueUsername: event.target.value});
}
changePassword(event) {
this.setState({valuePassword: event.target.value});
}
checkMatch(valueUsername, valuePassword) {
let users = this.state.users;
let valueMatch = 0;
users.forEach((user) => {
console.log(user['username']);
if (user['username'].toUpperCase() === valueUsername.toUpperCase()) {
valueMatch = 1;
console.log(user.password);
if (user.password === valuePassword)
valueMatch = 2;
return;
}
});
return valueMatch;
}
submitForm(event) {
let match = this.checkMatch(this.state.valueUsername, this.state.valuePassword);
console.log(match);
if (match != 2) {
event.preventDefault();
this.setState({valuePassword: ''});
if (match == 1) {
this.setState({validLog: 'Wrong password'});
this.setState({validMessage: 'Forgot it ? Click here'})
}
else
this.setState({validLog: 'Username doesn\'t exist'});
}
}
render() {
let validLogColor;
let validMessageColor;
let validMessage = this.state.validMessage;
if (this.state.validLog === '_')
validLogColor = 'SignIn_validNone';
else
validLogColor = 'SignIn_validRed';
if (this.state.validMessage === '_')
validMessageColor = 'SignIn_validNone'
else if (this.state.validMessage === 'Forgot it ? Click here') {
validMessageColor = 'SignIn_validBlack'
//NEXT TO THE IMPORTANT PART -> I insert a link who normally have to go in my router.get but go on 'localhost:3000/forgot_password' instead of 'localhost:3001/forgot_password'
validMessage = <Link to="/change_password">{this.state.validMessage}</Link>
//END OF THE NEXT IMPORTANT PART
}
else
validMessageColor = 'SignIn_validBlue'
return (
<Router>
<div id='SignIn'>
<form action='test.html' method='POST' id='SignIn_form' onSubmit={this.submitForm}>
<div id='SignIn_emptyInput'></div>
<input type="text" placeholder="Username" name='username' value={this.state.valueUsername} onChange={this.changeUsername} />
<input type="password" placeholder="Password" name='password' value={this.state.valuePassword} onChange={this.changePassword} />
<input id='submit' type="submit" value="SIGN IN" />
</form>
<div id='SignIn_validAndSentence'><span id='SignUp_signSentence' onClick={this.props.changeForSignUp}>Not member yet ? <span id='SignIn_signWord'>SIGN UP</span></span>
<div id='SignIn_validLog' className={validLogColor}>{this.state.validLog}</div>
//THIS IS THE IMPORTANT PART
<div id='SignIn_validMessage' className={validMessageColor}>{validMessage}</div>
// END OF THE IMPORTANT PART
</div>
</div>
</Router>
);
}
}
export default SignIn;
这适用于我的注册部分:
import React, { Component } from 'react';
import './SignUp.css';
class SignUp extends React.Component {
constructor(props) {
super(props);
this.state = {
valueMail: '',
valuePassword: '',
valueUsername: '',
validMail: 'false',
validPassword: 'unsafe',
validUsername: 'true',
users: []
};
this.changeMail = this.changeMail.bind(this);
this.changePassword = this.changePassword.bind(this);
this.changeUsername = this.changeUsername.bind(this);
this.submitForm = this.submitForm.bind(this);
this.checkValid = this.checkValid.bind(this);
}
async componentDidMount() {
const response = await fetch('/users')
const users = await response.json()
this.setState({users: users})
}
changeMail(event) {
this.setState({valueMail: event.target.value});
this.checkValid('mail', event.target.value);
}
changePassword(event) {
this.setState({valuePassword: event.target.value});
this.checkValid('password', event.target.value);
}
changeUsername(event) {
this.setState({valueUsername: event.target.value});
this.checkValid('username', event.target.value);
}
submitForm(event) {
if (!this.state.valueMail || this.state.validMail === false || this.state.validMail === 'taken'
|| !this.state.valuePassword || this.state.validPassword === 'tooLong' || this.state.validPassword === 'unsafe'
|| !this.state.valueUsername || this.state.validUsername === false || this.state.validUsername === 'taken')
event.preventDefault();
if (!this.state.valueMail || this.state.validMail === false || this.state.validMail === 'taken')
this.setState({valueMail: ''})
if (!this.state.valuePassword || this.state.validPassword === 'tooLong' || this.state.validPassword === 'unsafe')
this.setState({valuePassword: ''});
if (!this.state.valueUsername || this.state.validUsername === false || this.state.validUsername === 'taken')
this.setState({valueUsername: ''});
}
checkValid(elem, value) {
if (elem == 'mail' && value) {
let checkMail = new RegExp(/^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
if (value.length > 30)
this.setState({validMail: 'tooLong'});
else if (checkMail.test(value))
this.setState({validMail: true});
else
this.setState({validMail: false});
}
else if (elem == 'password' && value) {
let checkPasswordWeak = new RegExp(/.{4,}/);
let checkPasswordSecure = new RegExp(/^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{6,}$|^.{12,}$/);
if (value.length > 30)
this.setState({validPassword: 'tooLong'});
else if (checkPasswordSecure.test(value))
this.setState({validPassword: 'secure'});
else if (checkPasswordWeak.test(value))
this.setState({validPassword: 'weak'});
else
this.setState({validPassword: 'unsafe'});
}
else if (elem == 'username' && value) {
let checkUsernameCaracters = new RegExp(/^[^\s!@#$&*.><?`~%^()+=§"'|\\/]+$/);
if (value.length > 30)
this.setState({validUsername: 'tooLong'});
else if (!checkUsernameCaracters.test(value))
this.setState({validUsername: false});
else
this.setState({validUsername: true});
}
if (elem == 'mail' || elem == 'username') {
let users = this.state.users;
users.forEach((user) => {
if (user[elem].toUpperCase() === value.toUpperCase()) {
if (elem == 'mail')
this.setState({validMail: 'taken'});
else if (elem == 'username')
this.setState({validUsername: 'taken'});
return;
}
});
}
}
render() {
let validMail;
let validMailColor;
let checked = '\u2713';
let wrong = '\u2717';
if (this.state.valueMail && this.state.validMail === true) {
validMail = 'Valid mail ' + checked;
validMailColor = 'SignUp_validGreen';
}
else if (this.state.valueMail && this.state.validMail === 'taken') {
validMail = 'Mail already used ' + wrong;
validMailColor = 'SignUp_validRed';
}
else if (this.state.valueMail && (this.state.validMail === 'tooLong' || this.state.validMail === false)) {
validMail = 'Mail incorect ' + wrong;
validMailColor = 'SignUp_validRed';
}
else {
validMail = '_';
validMailColor = 'SignUp_validNone';
}
let validPassword;
let validPasswordColor;
if (this.state.valuePassword && this.state.validPassword === 'tooLong') {
validPassword = 'Password too long ' + wrong;
validPasswordColor = 'SignUp_validRed';
}
else if (this.state.valuePassword && this.state.validPassword === 'unsafe') {
validPassword = 'Unsafe password ' + wrong;
validPasswordColor = 'SignUp_validRed';
}
else if (this.state.valuePassword && this.state.validPassword === 'weak') {
validPassword = 'Password weak ~';
validPasswordColor = 'SignUp_validOrange';
}
else if (this.state.valuePassword && this.state.validPassword === 'secure') {
validPassword = 'Secure password ' + checked;
validPasswordColor = 'SignUp_validGreen';
}
else {
validPassword = '_';
validPasswordColor = 'SignUp_validNone';
}
let validUsername;
let validUsernameColor;
if (this.state.valueUsername && this.state.validUsername === true) {
validUsername = 'Valid Username ' + checked;
validUsernameColor = 'SignUp_validGreen';
}
else if (this.state.valueUsername && this.state.validUsername === 'taken') {
validUsername = 'Username already used ' + wrong;
validUsernameColor = 'SignUp_validRed';
}
else if (this.state.valueUsername && this.state.validUsername === 'tooLong' || this.state.valueUsername && this.state.validUsername === false) {
validUsername = 'Username incorect ' + wrong;
validUsernameColor = 'SignUp_validRed';
}
else {
validUsername = '_';
validUsernameColor = 'SignUp_validNone';
}
return (
<div id='SignUp'>
//HERE IS THE FORM THAT REDIRECT ME WELL IN 'localhost:3001/check_signUp'
<form action='/check_signUp' method='POST' id='SignUp_form' onSubmit={this.submitForm}>
<input type="text" placeholder="Mail" name='mail' value={this.state.valueMail} onChange={this.changeMail} />
<input type="password" placeholder="Password" name='password' value={this.state.valuePassword} onChange={this.changePassword} />
<input type="text" placeholder="Username" name='username' value={this.state.valueUsername} onChange={this.changeUsername} />
<input id='submit' type="submit" value="SIGN UP" />
</form>
//END OF THE FORM
<div id='SignUp_validAndSentence'><span id='SignUp_signSentence' onClick={this.props.changeForSignIn}> Already member ? <span id='SignUp_signWord'>SIGN IN</span></span>
<div id='SignUp_validMail' className={validMailColor}>{validMail}</div>
<div id='SignUp_validPassword' className={validPasswordColor}>{validPassword}</div>
<div id='SignUp_validUsername' className={validUsernameColor}>{validUsername}</div>
</div>
</div>
);
}
}
export default SignUp;
所以有人可以向我解释为什么它适用于表单而不适用于 link 吗?非常感谢
react-router-dom 中的 Link 组件仅用于导航 react-router 定义的不同路由。在这种情况下,您可能只想使用常规 HTML 锚标记
<a href="localhost:3001/change_password">{this.state.validMessage}</a>
如果我输入 :
<a href="localhost:3001/change_password">{this.state.validMessage}</a>
但是我不明白为什么我必须写所有路径,因为我在提交表单时不必这样做。有人可以解释一下为什么吗?
嘿,我正在寻找将 React 页面重定向到 Express 页面的方法。目的是在用户忘记密码时发送邮件。我尝试使用路由器,但它发送给我 'localhost:3000/forgot_password' 而不是 'localhost:3001/forgot_password'.
然而,这适用于我在注册部分提交的表单。为什么?
我的代码有点乱,所以我会评论重要的部分。
这是快递部分:
const bodyParser = require('body-parser')
const express = require('express')
const mysql = require('mysql')
const randomString = require('randomstring')
const bcrypt = require('bcrypt')
const app = express()
const router = express.Router()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
app.use((req, res, next) => {
req.db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '00000000',
database: 'Matcha'
});
next();
});
router.get('/users', (req, res) => {
req.db.query("SELECT * FROM Users;", (err, rows, fields) => {
if(err)
return(res.send(err) && console.log(err));
res.json(rows);
});
});
router.post('/check_signUp', (req, res) => {
console.log(req.body);
const saltRounds = 10;
const password = req.body.password;
bcrypt.hash(password, saltRounds, function(err, hashPassword) {
const randomKey = randomString.generate(15)
console.log(req.body.username, password, req.body.mail, randomKey)
req.db.query(`INSERT INTO Users (username, password, mail, randomKey) VALUES ('${req.body.username}', '${hashPassword}', '${req.body.mail}', '${randomKey}');`, (err, rows, fields) => {
if(err)
return(res.send(err) && console.log(err));
bcrypt.compare('ffffff', 'b07gWLRGjqGwKJzXx6Dt.CH00c0rRlioy8KdcWc4ze18LoL2YHeC', function(err, res) {
console.log(res)
});
res.redirect('/');
})
})
})
// HERE IS THE IMPORTANT PART. I need to go in this router.get
router.get('/change_password', (req, res) => {
res.send('OK');
});
// END OF THE IMPORTANT PART
app.use(router)
app.set('port', (process.env.PORT || 3001))
app.listen(app.get('port'), () => {
console.log(`Listening on ${app.get('port')}`)
})
这里是反应部分:
import React, { Component } from 'react';
import './SignIn.css';
import { BrowserRouter as Router, Link } from 'react-router-dom';
class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
valueUsername: '',
valuePassword: '',
users: [],
validLog: '_',
validMessage: '_'
};
this.changeUsername = this.changeUsername.bind(this);
this.changePassword = this.changePassword.bind(this);
this.submitForm = this.submitForm.bind(this);
this.checkMatch = this.checkMatch.bind(this);
}
async componentDidMount() {
const response = await fetch('/users')
const users = await response.json()
this.setState({users: users})
}
changeUsername(event) {
this.setState({valueUsername: event.target.value});
}
changePassword(event) {
this.setState({valuePassword: event.target.value});
}
checkMatch(valueUsername, valuePassword) {
let users = this.state.users;
let valueMatch = 0;
users.forEach((user) => {
console.log(user['username']);
if (user['username'].toUpperCase() === valueUsername.toUpperCase()) {
valueMatch = 1;
console.log(user.password);
if (user.password === valuePassword)
valueMatch = 2;
return;
}
});
return valueMatch;
}
submitForm(event) {
let match = this.checkMatch(this.state.valueUsername, this.state.valuePassword);
console.log(match);
if (match != 2) {
event.preventDefault();
this.setState({valuePassword: ''});
if (match == 1) {
this.setState({validLog: 'Wrong password'});
this.setState({validMessage: 'Forgot it ? Click here'})
}
else
this.setState({validLog: 'Username doesn\'t exist'});
}
}
render() {
let validLogColor;
let validMessageColor;
let validMessage = this.state.validMessage;
if (this.state.validLog === '_')
validLogColor = 'SignIn_validNone';
else
validLogColor = 'SignIn_validRed';
if (this.state.validMessage === '_')
validMessageColor = 'SignIn_validNone'
else if (this.state.validMessage === 'Forgot it ? Click here') {
validMessageColor = 'SignIn_validBlack'
//NEXT TO THE IMPORTANT PART -> I insert a link who normally have to go in my router.get but go on 'localhost:3000/forgot_password' instead of 'localhost:3001/forgot_password'
validMessage = <Link to="/change_password">{this.state.validMessage}</Link>
//END OF THE NEXT IMPORTANT PART
}
else
validMessageColor = 'SignIn_validBlue'
return (
<Router>
<div id='SignIn'>
<form action='test.html' method='POST' id='SignIn_form' onSubmit={this.submitForm}>
<div id='SignIn_emptyInput'></div>
<input type="text" placeholder="Username" name='username' value={this.state.valueUsername} onChange={this.changeUsername} />
<input type="password" placeholder="Password" name='password' value={this.state.valuePassword} onChange={this.changePassword} />
<input id='submit' type="submit" value="SIGN IN" />
</form>
<div id='SignIn_validAndSentence'><span id='SignUp_signSentence' onClick={this.props.changeForSignUp}>Not member yet ? <span id='SignIn_signWord'>SIGN UP</span></span>
<div id='SignIn_validLog' className={validLogColor}>{this.state.validLog}</div>
//THIS IS THE IMPORTANT PART
<div id='SignIn_validMessage' className={validMessageColor}>{validMessage}</div>
// END OF THE IMPORTANT PART
</div>
</div>
</Router>
);
}
}
export default SignIn;
这适用于我的注册部分:
import React, { Component } from 'react';
import './SignUp.css';
class SignUp extends React.Component {
constructor(props) {
super(props);
this.state = {
valueMail: '',
valuePassword: '',
valueUsername: '',
validMail: 'false',
validPassword: 'unsafe',
validUsername: 'true',
users: []
};
this.changeMail = this.changeMail.bind(this);
this.changePassword = this.changePassword.bind(this);
this.changeUsername = this.changeUsername.bind(this);
this.submitForm = this.submitForm.bind(this);
this.checkValid = this.checkValid.bind(this);
}
async componentDidMount() {
const response = await fetch('/users')
const users = await response.json()
this.setState({users: users})
}
changeMail(event) {
this.setState({valueMail: event.target.value});
this.checkValid('mail', event.target.value);
}
changePassword(event) {
this.setState({valuePassword: event.target.value});
this.checkValid('password', event.target.value);
}
changeUsername(event) {
this.setState({valueUsername: event.target.value});
this.checkValid('username', event.target.value);
}
submitForm(event) {
if (!this.state.valueMail || this.state.validMail === false || this.state.validMail === 'taken'
|| !this.state.valuePassword || this.state.validPassword === 'tooLong' || this.state.validPassword === 'unsafe'
|| !this.state.valueUsername || this.state.validUsername === false || this.state.validUsername === 'taken')
event.preventDefault();
if (!this.state.valueMail || this.state.validMail === false || this.state.validMail === 'taken')
this.setState({valueMail: ''})
if (!this.state.valuePassword || this.state.validPassword === 'tooLong' || this.state.validPassword === 'unsafe')
this.setState({valuePassword: ''});
if (!this.state.valueUsername || this.state.validUsername === false || this.state.validUsername === 'taken')
this.setState({valueUsername: ''});
}
checkValid(elem, value) {
if (elem == 'mail' && value) {
let checkMail = new RegExp(/^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
if (value.length > 30)
this.setState({validMail: 'tooLong'});
else if (checkMail.test(value))
this.setState({validMail: true});
else
this.setState({validMail: false});
}
else if (elem == 'password' && value) {
let checkPasswordWeak = new RegExp(/.{4,}/);
let checkPasswordSecure = new RegExp(/^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{6,}$|^.{12,}$/);
if (value.length > 30)
this.setState({validPassword: 'tooLong'});
else if (checkPasswordSecure.test(value))
this.setState({validPassword: 'secure'});
else if (checkPasswordWeak.test(value))
this.setState({validPassword: 'weak'});
else
this.setState({validPassword: 'unsafe'});
}
else if (elem == 'username' && value) {
let checkUsernameCaracters = new RegExp(/^[^\s!@#$&*.><?`~%^()+=§"'|\\/]+$/);
if (value.length > 30)
this.setState({validUsername: 'tooLong'});
else if (!checkUsernameCaracters.test(value))
this.setState({validUsername: false});
else
this.setState({validUsername: true});
}
if (elem == 'mail' || elem == 'username') {
let users = this.state.users;
users.forEach((user) => {
if (user[elem].toUpperCase() === value.toUpperCase()) {
if (elem == 'mail')
this.setState({validMail: 'taken'});
else if (elem == 'username')
this.setState({validUsername: 'taken'});
return;
}
});
}
}
render() {
let validMail;
let validMailColor;
let checked = '\u2713';
let wrong = '\u2717';
if (this.state.valueMail && this.state.validMail === true) {
validMail = 'Valid mail ' + checked;
validMailColor = 'SignUp_validGreen';
}
else if (this.state.valueMail && this.state.validMail === 'taken') {
validMail = 'Mail already used ' + wrong;
validMailColor = 'SignUp_validRed';
}
else if (this.state.valueMail && (this.state.validMail === 'tooLong' || this.state.validMail === false)) {
validMail = 'Mail incorect ' + wrong;
validMailColor = 'SignUp_validRed';
}
else {
validMail = '_';
validMailColor = 'SignUp_validNone';
}
let validPassword;
let validPasswordColor;
if (this.state.valuePassword && this.state.validPassword === 'tooLong') {
validPassword = 'Password too long ' + wrong;
validPasswordColor = 'SignUp_validRed';
}
else if (this.state.valuePassword && this.state.validPassword === 'unsafe') {
validPassword = 'Unsafe password ' + wrong;
validPasswordColor = 'SignUp_validRed';
}
else if (this.state.valuePassword && this.state.validPassword === 'weak') {
validPassword = 'Password weak ~';
validPasswordColor = 'SignUp_validOrange';
}
else if (this.state.valuePassword && this.state.validPassword === 'secure') {
validPassword = 'Secure password ' + checked;
validPasswordColor = 'SignUp_validGreen';
}
else {
validPassword = '_';
validPasswordColor = 'SignUp_validNone';
}
let validUsername;
let validUsernameColor;
if (this.state.valueUsername && this.state.validUsername === true) {
validUsername = 'Valid Username ' + checked;
validUsernameColor = 'SignUp_validGreen';
}
else if (this.state.valueUsername && this.state.validUsername === 'taken') {
validUsername = 'Username already used ' + wrong;
validUsernameColor = 'SignUp_validRed';
}
else if (this.state.valueUsername && this.state.validUsername === 'tooLong' || this.state.valueUsername && this.state.validUsername === false) {
validUsername = 'Username incorect ' + wrong;
validUsernameColor = 'SignUp_validRed';
}
else {
validUsername = '_';
validUsernameColor = 'SignUp_validNone';
}
return (
<div id='SignUp'>
//HERE IS THE FORM THAT REDIRECT ME WELL IN 'localhost:3001/check_signUp'
<form action='/check_signUp' method='POST' id='SignUp_form' onSubmit={this.submitForm}>
<input type="text" placeholder="Mail" name='mail' value={this.state.valueMail} onChange={this.changeMail} />
<input type="password" placeholder="Password" name='password' value={this.state.valuePassword} onChange={this.changePassword} />
<input type="text" placeholder="Username" name='username' value={this.state.valueUsername} onChange={this.changeUsername} />
<input id='submit' type="submit" value="SIGN UP" />
</form>
//END OF THE FORM
<div id='SignUp_validAndSentence'><span id='SignUp_signSentence' onClick={this.props.changeForSignIn}> Already member ? <span id='SignUp_signWord'>SIGN IN</span></span>
<div id='SignUp_validMail' className={validMailColor}>{validMail}</div>
<div id='SignUp_validPassword' className={validPasswordColor}>{validPassword}</div>
<div id='SignUp_validUsername' className={validUsernameColor}>{validUsername}</div>
</div>
</div>
);
}
}
export default SignUp;
所以有人可以向我解释为什么它适用于表单而不适用于 link 吗?非常感谢
react-router-dom 中的 Link 组件仅用于导航 react-router 定义的不同路由。在这种情况下,您可能只想使用常规 HTML 锚标记
<a href="localhost:3001/change_password">{this.state.validMessage}</a>
如果我输入 :
<a href="localhost:3001/change_password">{this.state.validMessage}</a>
但是我不明白为什么我必须写所有路径,因为我在提交表单时不必这样做。有人可以解释一下为什么吗?