当我提交用户登录表单时，我希望我的网页被重定向

Question

我正在构建一个有两个页面的网站。主页和管理面板页面。

我正在使用 MERN 堆栈。

目前，当我单击导航栏上的管理员 link 时，它会提示用户输入用户名并通过，如果用户输入正确的凭据，则会弹出一条警告 "welcome" .（我使用警报来测试我的 onSubmit 是否正常工作。）无论如何，我的想法是我希望用户在单击提交后被重定向到我的管理面板页面。

我尝试过的事情：

在成功凭据并提交后，我尝试返回我的管理面板组件
在成功凭据并提交后，我尝试使用 react-router-dom
[= 返回一个带有 to="/admin" 的 Link 31=]

我认为我需要的东西：

检索请求的后端？像 post 或 get 请求？我不太熟悉后端的东西，所以我不确定我是否需要它来完成这个。

谢谢，希望这是清楚的。

Answer 1

最简单的方法是通过 window.location = <url> 手动重定向，但如果您没有使用 SSR 或带有某些路由解决方案的后端，则需要制作一个，如果您不需要 SSR（服务器端-渲染）考虑将路由添加到您的快速服务器。假设您使用的是 React-Router，以下是您需要在后端使用的代码（这只是您自己想出的示例）

const express = require('express');
const path = require('path');

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
    var list = ["item1", "item2", "item3"];
    res.json(list);
    console.log('Sent list of items');
});

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

Link 来源说明：Deploying a React app with React-Router and an Express Backend!

Answer 2

正如您所说，您正在使用 React Router Dom，那么您将可以访问组件 props 中的 history 对象。

假设您的登录组件是这样的：

<h2>Login Here!</h2>
<Button className="btn btn-primary" onClick={this.login}>
    Sign in
</Button>

然后点击登录按钮后，login函数将被调用。在 login 函数中你可以有这样的东西：

this.authenticateUser.then(() => {
     // do stuff you want to do after successful login
     this.props.history.push("/admin") // this is what you need
});

确保用 export default withRouter(LoginPage) 包装您的组件以获得对 history 属性的访问权限。

别忘了导入 import {RouteComponentProps, withRouter} from 'react-router-dom';

因为我不知道你的代码怎么样，这是我能想到的最好的。

希望对您有所帮助。

当我提交用户登录表单时，我希望我的网页被重定向

When I submit a user login form, I want my webpage to be re-directed

javascript

express

reactjs

mern