Question

我正在构建一个简单的库存管理应用程序。我使用 JWT 进行身份验证/授权并部署在 heroku 上。该应用程序在本地运行良好，但对于 Heroku 部署的应用程序，当我重新加载页面时，它在另一个页面中显示一个空白页面和 json 数据。我花了几天时间来解决这个问题，发现问题在于页面刷新时 react-router 没有向服务器发出请求。我发现这篇文章可以解决问题 https://ui.dev/react-router-cannot-get-url-refresh/ 并尝试在 URL 中使用哈希标记。但是，当我在本地尝试时，它不起作用。例如，在我的 App.js 中，我有路由并在根 url 的末尾插入了 #。（我也在 package.json 中使用了代理）登录后，浏览器中的 url 没有显示 # 并给我一个空白页面。但是，如果我删除 # 它工作正常。非常感谢您对此问题的帮助。

App.js 路由

<InventoryContext.Provider value={{name, setName,region, setRegion}}>
    <Router>
      <Switch>
        <Route exact path="/#" render={props => !isAuthenticated ? <Login {...props} setAuth={setAuth} /> : <Redirect to="/bacslist" />} />
        <Route exact path="/#/register" render={props => !isAuthenticated ? <Register {...props} setAuth={setAuth} /> : <Redirect to="/bacslist" />}/>
        <Route exact path="/#/bacslist/" render={props => isAuthenticated ? <Bacslist {...props} setAuth={setAuth} /> : <Redirect to="/" />}/>
        <Route exact path="/#/bacslist/salesinventory" render={props => isAuthenticated ? <Salesinventory {...props} setAuth={setAuth} /> : <Redirect to="/bacslist/salesinventory" />}/>
        <Route exact path="/#/bacslist/demoinventory" render={props => isAuthenticated ? <Demoinventory {...props} setAuth={setAuth} /> : <Redirect to="/bacslist/demoinventory" />}/>
      </Switch>
    </Router>
    </InventoryContext.Provider>

package.json

 "proxy": "http://localhost:5000"

页面刷新时页面不工作（反应路由器）

0 个答案: