使用 Axios 登录后尝试在 React 中重定向（单独的前端和后端）

Question

The answer to my question probably already exists, but I've run out of ideas of where/how to check.

I'm building a project with a teammate split into separate Frontend and Backends.

After the login form is submitted, I'm able to successfully set an authorization token in localStorage but get an error with trying to redirect the user from the root "/" page to a "/home" page where the main content will be. I don't think <Link to="/home" /> is the right solution, not sure if <Redirect /> is. I was trying axios.get("/home") but this is the error that I get:

GEThttp://localhost:3000/home
[HTTP/1.1 404 Not Found 5ms]

catch Error: Request failed with status code 404
    createError createError.js:16
    settle settle.js:17
    handleLoad xhr.js:62
    dispatchXhrRequest xhr.js:37
    xhrAdapter xhr.js:13
    dispatchRequest dispatchRequest.js:52
    promise callback*request Axios.js:61
    method Axios.js:76
    wrap bind.js:9
    handleSubmit Login.js:32
    React 14
    unstable_runWithPriority scheduler.development.js:646
    React 4

CODE:

import React, { useState } from "react";
import { BrowserRouter as Router, Redirect } from "react-router-dom";
import axios from "axios";

export default function Login(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  function handleChange (e) {
    if (e.target.name === "email") {
      setEmail(e.target.value);
    } else {
      setPassword(e.target.value);
    }
  }

  async function handleSubmit (e) {
    e.preventDefault();
    try {
      const res = await axios.post("/api/user/login", { email, password});
      console.log(res);
        if (!res.data.error) {

        localStorage.setItem("authorization", "Bearer: " + res.data); // works
        return await axios.get("/home");
      } else {
        console.log("1st", res.data.error)
      }
  } catch (error) {
    console.log("catch", error);
  }

  }

  return (
    <form onSubmit={ handleSubmit } >
      { errorMsg && <div className="errorMsg">Error: { errorMsg }</div> }
      <label>Email: <input type="email" name="email" value={email} onChange={ handleChange } placeholder="you@email.com" required/></label><br />
      <label>Password: <input type="password" name="password" value={password} onChange={ handleChange } placeholder="********" required/></label>
      <button type="submit" name="button">Submit</button>
    </form>
    )
  }

Answer 1

try to use useHistory from react-router-dom . After successfully set token then use history.push('/route-name') to go to your preferred page.

import {useHistory} from 'react-router-dom';

const history = useHistory();

async function handleSubmit (e) {
    e.preventDefault();
    try {
      const res = await axios.post("/api/user/login", { email, password});
      console.log(res);
        if (!res.data.error) {

        localStorage.setItem("authorization", "Bearer: " + res.data); // works
        history.push("/home");
      } else {
        console.log("1st", res.data.error)
      }
  } catch (error) {
    console.log("catch", error);
  }

Answer 2

I guess you are confused with routing in frontend and routing in backend . Routing in backend is related with your endpoints: /api/user/login , /api/user and so on. Those return data when you make a http call (with axios in your case). Routing in frontend is related with the flow between pages (aka navigation). So /home is a route in your frontend and react-router-dom has access to it. To be able to jump to new pages, the most straightforward way is to call history.push("/home") using the useHistory() hook (inside your React component) as Zahid showed or accessing history as props if <Login> component is wrapped by a <Route> component