嘗試導入錯誤：“react-router-dom”不包含默認導出（導入為“useNavigate”）

Question

我有一個建築項目，在這個項目中我使用了一個模板，我有一個登錄頁面，我想在人們按下登錄按鈕后轉移到另一個界面，新界面的路徑是“/message”

現在我有一個登錄頁面和一個消息頁面，但是我想在用戶登錄后從登錄頁面移動到消息頁面

但問題是我試圖使用“導航”在兩個頁面之間切換，但我得到了這個消息：

Attempted import error: 'react-router-dom' does not contain a default export (imported as 
'useNavigate').

我該如何解決這個問題？

JWTRegisterTab.js：

/**
 * Form Validation Schema
 */
const schema = yup.object().shape({
  firstName: yup.string().required("You must enter first name"),
  lastName: yup.string().required("You must enter last name"),
  phoneNumber: yup.string().required("You must enter phone number"),
  email: yup
    .string()
    .email("You must enter a valid email")
    .required("You must enter a email"),
  password: yup
    .string()
    .required("Please enter your password.")
    .min(8, "Password is too short - should be 8 chars minimum."),
});

const defaultValues = {
  firstName: "",
  lastName: "",
  phoneNumber: "",
  email: "",
  password: "",
};

function JWTRegisterTab(props) {
  const dispatch = useDispatch();
  const authRegister = useSelector(({ auth }) => auth.register);

  const { control, formState, handleSubmit, reset, setError } = useForm({
    mode: "onChange",
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { isValid, dirtyFields, errors } = formState;

  function onSubmit(model) {
    console.log("submit ", model);

    dispatch(submitRegister(model));
  }
  return (
    <div className="w-full">
      <form
        className="flex flex-col justify-center w-full"
        onSubmit={handleSubmit(onSubmit)}
      >
        <Controller
          name="firstName"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mb-16"
              type="text"
              label="first name"
              error={!!errors.firstName}
              helperText={errors?.firstName?.message}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <Icon className="text-20" color="action">
                      person
                    </Icon>
                  </InputAdornment>
                ),
              }}
              variant="outlined"
              required
            />
          )}
        />

        <Controller
          name="lastName"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mb-16"
              type="text"
              label="last name"
              error={!!errors.lastName}
              helperText={errors?.lastName?.message}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <Icon className="text-20" color="action">
                      person
                    </Icon>
                  </InputAdornment>
                ),
              }}
              variant="outlined"
              required
            />
          )}
        />

        <Controller
          name="email"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mb-16"
              type="text"
              error={!!errors.email}
              helperText={errors?.email?.message}
              label="Email"
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <Icon className="text-20" color="action">
                      email
                    </Icon>
                  </InputAdornment>
                ),
              }}
              variant="outlined"
              required
            />
          )}
        />

        <Controller
          name="phoneNumber"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mb-16"
              type="text"
              label="phone number"
              error={!!errors.phoneNumber}
              helperText={errors?.phoneNumber?.message}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <Icon className="text-20" color="action">
                      phone
                    </Icon>
                  </InputAdornment>
                ),
              }}
              variant="outlined"
              required
            />
          )}
        />
        <Controller
          name="password"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mb-16"
              type="password"
              label="Password"
              error={!!errors.password}
              helperText={errors?.password?.message}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <Icon className="text-20" color="action">
                      vpn_key
                    </Icon>
                  </InputAdornment>
                ),
              }}
              variant="outlined"
              required
            />
          )}
        />

        <Button
          type="submit"
          variant="contained"
          color="primary"
          className="w-full mx-auto mt-16"
          aria-label="REGISTER"
          disabled={_.isEmpty(dirtyFields) || !isValid}
          value="legacy"
        >
          Register
        </Button>
      </form>
    </div>
  );
}

export default JWTRegisterTab;

registerSlice.js：

import { createSlice } from "@reduxjs/toolkit";
import jwtService from "app/services/jwtService";
import { setUserData } from "./userSlice";
import useNavigate from "react-router-dom";

export const submitRegister =
  ({ firstName, lastName, email, phoneNumber, password }) =>
  async (dispatch) => {
    let navigate = useNavigate();

    return jwtService
      .createUser({ firstName, lastName, email, phoneNumber, password })
      .then((user) => {
        console.log("then: ", user);
        // in Redux
        dispatch(setUserData(user));
        if (user.data.data.status == 200 || user.data.data.status == 200) {
          //  window.location = "/script"
          navigate("/message");
        }
        console.log("navigate: ", user.data.data.status);
        return dispatch(registerSuccess());
      })
      .catch((errors) => {
        return dispatch(registerError(errors));
      });
  };

// those will be appears in Redux
const initialState = {
  success: false,
  errors: [],
};

const registerSlice = createSlice({
  name: "auth/register",
  initialState,
  reducers: {
    registerSuccess: (state, action) => {
      state.success = true;
      state.errors = [];
    },
    registerError: (state, action) => {
      state.success = false;
      state.errors = action.payload;
    },
  },
  extraReducers: {},
});

export const { registerSuccess, registerError } = registerSlice.actions;

export default registerSlice.reducer;

jwtService.js：

  createUser = async ({
    firstName,
    lastName,
    email,
    phoneNumber,
    password,
  }) => {
    console.log("create User...");
    const response = await axios.post("auth/sign-up", {
      firstName,
      lastName,
      email,
      phoneNumber,
      password,
    });
    console.log("response axios: ", response);
    if (response.data.data) {
      this.setSession(response.data.data.access_token);
      resolve(response.data.data);
      console.log(
        "inside jwtService ===> createUser Response Data: ",
        response.data
      );
    } else {
      reject(response.data.error);
    }
  };

用戶切片.js：

export const setUserData = (user) => async (dispatch, getState) => {
  /*
        You can redirect the logged-in user to a specific route depending on his role
         */
  // history.location.state = {
  //   redirectUrl: user.redirectUrl, // for example 'apps/academy'
  // };

  dispatch(setUser(user));
};

const initialState = {
  role: [], // guest
  data: {
    displayName: "John Doe",
    photoURL: "assets/images/avatars/Velazquez.jpg",
    email: "johndoe@withinpixels.com",
    shortcuts: ["calendar", "mail", "contacts", "todo"],
  },
};

const userSlice = createSlice({
  name: "auth/user",
  initialState,
  reducers: {
    setUser: (state, action) => action.payload,
    userLoggedOut: (state, action) => initialState,
  },
  extraReducers: {},
});

export const { setUser, userLoggedOut } = userSlice.actions;

export default userSlice.reducer;

Answer 1

在 React Router useNavigate 中，它是一個命名導出，而不是默認導出。 所以這是要使用的語法：

import { useNavigate } from "react-router-dom";