gpt4 book ai didi

javascript - react-router-dom v6 history push和useNavigate问题

转载 作者:行者123 更新时间:2023-12-05 03:20:22 25 4
gpt4 key购买 nike

我在我的项目中使用 react-router-dom v6 和 mobex,当我使用它时出现错误,如下所示。

主要.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app/layout/App'
import './app/layout/styles.css'
import 'semantic-ui-css/semantic.min.css'
import 'react-toastify/dist/ReactToastify.min.css'
import 'react-calendar/dist/Calendar.css'
import 'react-datepicker/dist/react-datepicker.css'
import { store, StoreContext } from './app/stores/store'
import { BrowserRouter } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
export const navigate = useNavigate();

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<StoreContext.Provider value={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</StoreContext.Provider>
</React.StrictMode>
)

userStore.ts:

import { UserFormValues } from './../models/user';
import { makeAutoObservable, runInAction } from "mobx";
import { User } from "../models/user";
import agent from '../api/agent';
import { store } from './store';
import { navigate } from '../../main';

export default class UserStore {
user:User | null = null;

constructor() {
makeAutoObservable(this);
}

logout = () => {
store.commonStore.setToken(null);
window.localStorage.removeItem('jwt');
this.user = null;
navigate('/');
}
}

错误:

"Invalid hook call. Hooks can only be called inside the body of a function component"

在旧版本中,当我像下面这样操作时,它可以正常工作:

主要.tsx:

...
...
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
...
...

和 userStore.tsx:

import { makeAutoObservable, runInAction } from "mobx";
import agent from "../api/agent";
import { User, UserFormValues } from "../models/user";
import { store } from "./store";
import { history } from "../../index";

export default class UserStore {
user: User | null = null;

constructor() {
makeAutoObservable(this);
}

logout = () => {
store.commonStore.setToken(null);
window.localStorage.removeItem("jwt");
this.user = null;
history.push("/");
};

我该如何解决这个问题?

最佳答案

这一行 const navigate = useNavigate() 只能在 React 组件或自定义钩子(Hook)中,因为 useNavigate 是一个钩子(Hook)。见Rules of Hooks了解更多。解决此问题的一种方法是更改​​ logout 函数,使其将 navigate 作为参数,如下所示:

logout = (navigate) => {
store.commonStore.setToken(null);
window.localStorage.removeItem("jwt");
this.user = null;
navigate("/");
};

然后在调用 logout 的组件中调用 useNavigate 并将 navigate 作为参数传递给它。像这样作为一个例子:

import UserStore from "./UserStore"; // use the correct path
import { useNavigate } from "react-router-dom";

export default function Component() {
const navigate = useNavigate();
const userStore = UserStore();
userStore.logout(navigate);

return <div></div>;
}

关于javascript - react-router-dom v6 history push和useNavigate问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73174746/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com