成功保存 MongoDB 后，Express 不会重定向到反应路由器根路径 - 无提示地失败 - 如何成功重定向？

Question

我是 React 和 React-router 的初学者，所以我可能犯了一个愚蠢的错误。

我正在构建一个 Web 应用程序，使用 React 和 React-router 作为前端服务器，使用 MongoDB 作为后端服务器。我正在使用 Axios 将 POST 表单数据从前端发送到后端。

我已经建立了一个注册页面

http://localhost:3000/register

。当我在注册表中输入凭据时，Axios 成功将表单数据发送到我设置的 Express API POST 路由

http://localhost:5000/api/users/register

。 Passport 获取该数据、注册用户并登录。

我能够在 Mongo shell 中验证每次尝试是否成功，因为我能够看到新创建的用户显示在数据库的

users

集合中。

在 Express POST 路由中，在成功将新用户保存到 MongoDB 集合中后，我尝试使用 `res.redirect('http:// /本地主机:3000/)'.

老实说，我无法判断 Express 是否进行了此重定向。我的理解是，Express 在到达

http://localhost:3000/

调用时结束请求/响应周期，但是，在我点击该路线时运行的

res.redirect()

调用之后，我有一个

console.log()

语句，似乎暗示

res.redirect('http://localhost:3000')

调用被忽略，但是当我查看浏览器的控制台时，我可以看到对

res.redirect()

的

XHR OPTION

请求以及对

http://localhost:3000/

的

XHR GET

请求，似乎暗示请求已重定向到

http://localhost:3000/ 

。在

http://localhost:3000/

请求中，在响应选项卡中，我收到文本

XHR GET

，它来自 React 的

You need to enable JavaScript to run this app.

文档中的

<noscript>

标签。这也让我认为对

index.html

的重定向请求已成功发出，但其他地方出了问题。我的浏览器中确实启用了 JavaScript。我在浏览器中手动导航到

http://localhost:3000/

没有问题。只是当尝试通过 Express

http://localhost:3000/

电话到达那里时，它似乎失败了。这是我的相关代码：

在前端

res.redirect()

文件中：

index.js

在前端

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root/>,
    errorElement: <ErrorPage/>,
    loader: rootLoader,
    action: rootAction
  },
  {
    path: "/login",
    element: <Login/>
  },
  {
    path: "/register",
    element: <Register/>,
    action: registerUserAction
  }
]);

路由文件中：

register.jsx

在后端

const handleSubmit = (event)=>{
    Axios.post('http://localhost:5000/api/users/register', {
      username: username,
      password: password
    });
  };

文件中：

server.js

在后端

app.use(passport.initialize());
app.use(passport.session());
passport.use(new PassportLocal({username: 'username', password: 'password'}, User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

//Creating API for user
app.use('/api/users', userRoutes);

文件中：

userRoutes.js

在后端

import { createUser, getUsers, getUserById } from "../controllers/userController.js";
import express from 'express';
import User from '../models/userModel.js';
const router = express.Router();

router.route('/register').post(createUser);

文件中：

userControllers.js

我做错了什么？或者，为什么在 

import express from 'express';
import User from '../models/userModel.js';
import asyncHandler from 'express-async-handler';

export const createUser = asyncHandler(async(req, res, next)=>{
  const registrationDetails = {username: req.body.username};
  const registrationPassword = req.body.password;
  const newUser = await new User(registrationDetails);
  const registeredUser = await User.register(registrationDetails, registrationPassword);
  req.login(registeredUser, (e)=>{
        if(e){
            console.log(e);
            return next(e);
        }else{
      res.redirect("http://localhost:3000/");
      console.log('in register user Express route after redirect');
        };
    });
});

文件中的块成功运行后，浏览器没有重定向到

http://localhost:3000/

？我已经阅读了二十多个关于该主题的 StackOverflow 问题，并尝试了许多不同的建议，但每一个都只是进一步破坏了代码而不是解决问题。

Answer 1

userControllers.js

是作为 POST 请求的响应正文返回的 React 应用程序的根文档的内容，而不是浏览器中的实际导航事件。

为了解决这个问题，您应该在响应中将重定向 URL 返回到前端，然后让前端处理重定向。

后端：

("You need to enable JavaScript to run this app")

前端：

// In your createUser function on the backend
req.login(registeredUser, (err) => {
    if(e) {
        console.log(err);
        return next(e);
    } else {
        res.json({ success: true, redirectUrl: "http://localhost:3000/" });
    }
});

希望有帮助！