如何使用 MobX 让我的 App.tsx 对 AuthStore 中的更改做出反应？

Question

我无法让我的应用程序对 AuthStore 中的更改做出反应

嗨，伙计们。 我真的很喜欢 mobx 的工作方式，但我不知道如何让它在我的

App.tsx

中工作

这是我的一部分

index.tsx

...
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

这里是

App.tsx

我试图根据我是否通过身份验证来显示和隐藏导航菜单

如果我把

<Navbar />

放在每一页上，它就会正常工作。但我真的很想把那个菜单放在这里，在一个地方，不要把它添加到我要添加的所有页面。

...

const App = () => {
  return (
    <>
      <SelectLanguage />
      <AppRouter />
    </>
  )
}

export default App

这是

AppRouter.tsx

-这里几乎可以正常工作-但是如果我注释代码并检查身份验证并在下面使用那个代码，那么它会转到正确的页面，但是我一直可以看到菜单:(

在当前版本中，它不会对登录或注销做出反应 - 我必须刷新页面才能看到从登录表单到已登录用户的页面。

...
const AppRouter = () => {
    const { authenticationStore } = useStores()

    return (
        <Observer>
            {() => (
                <>
                    {authenticationStore.isAuthenticated ?? 
                        <div className='navbar-container'>
                            <Navbar />
                        </div>
                    }
        
                    {/* <div className='navbar-container'>
                        <Navbar />
                    </div> */}
                    
                    <div className="content-container">
                        <Routes>
                            <Route path="/" element={<ProtectedRoute element={<HomePage />} notAllowedPathOrElement={<GreetingPage />} />} />
                            <Route path="/login" element={<ProtectedRoute element={<Navigate to="/" />} notAllowedPathOrElement={<LoginPage />} />} />
                            <Route path="/registration" element={<ProtectedRoute element={<Navigate to="/" />} notAllowedPathOrElement={<RegisterPage />} />} />
                            <Route path="/protected" element={<ProtectedRoute roles={["ADMIN"]} permissions={["TESTOWE_PRAWO"]} element={<LoginPage />} />} />
                            <Route path="*" element={<Navigate to="/" />} />
                        </Routes>
                    </div>
                </>
            )}
        </Observer>
    )
}

export default AppRouter

这里是

AuthenticationStore.ts

...
import { makeAutoObservable } from "mobx"
...

class AuthenticationStore implements StoreInterface {
    rootStore: RootStore

    constructor(rootStore: RootStore) {
        this.rootStore = rootStore
        makeAutoObservable(this)
    }

    get token () {
        return localStorage.getItem(tokenLocalStorageKey)
    }

    get isAuthenticated () {
        return this.tokenData != null
    }

    get tokenData() {
        if (!this.token) {
            return undefined
        }

        let tokenData = Object.assign(new TokenData(), jwt_decode(this.token) as TokenData)

        if (new Date() > tokenData.expirationDate) {
            localStorage.removeItem(tokenLocalStorageKey)
            return undefined
        }

        return tokenData
    }

...

    login = async() => {
        const { loginFormStore } = this.rootStore
        ...
            if (token) {
                localStorage.setItem(tokenLocalStorageKey, token)
            }
        ...
    }

    logout = () => {
        ...
        localStorage.removeItem(tokenLocalStorageKey)
    }
}

export default AuthenticationStore

其他一切都很好......只有

App.tsx

有问题

希望有人能帮忙:)