reactjs - 如何在生产中修复反应路由器 404 错误

Question

路由器在我的本地工作，但我无法通过生产中的登录屏幕。我有一个404 - File or directory not found.

网络/回调？代码=c_FJL3txY1QZk6l_&state=lLBGkLyhwluUMs08r4nmRxAH22nYQj3L

身份验证有效，登录后出现错误，我可以在 Auth0 上看到我登录系统，但是当我输入（在 404 之后，而不是上面的 url）http://my-site.net/#/board时，它重定向到http://my-site.net/#/login.

"homepage": "http://my-site.net/"

export const AUTH_CONFIG = {
  domain: 'dev-o00fke8o.eu.auth0.com',
  clientId: 'dwbY5EkuW2pK16CzIf4AaUCQkEsTKQHQ',
  callbackUrl: 'http://my-site.net/callback'
}

我的路线.js

<Router history={history}>
      <HashRouter>
        <Route
          exact
          path="/"
          render={props => <Login auth={auth} {...props} />}
        />

        <Route
          path="/brand"
          render={props =>
            !auth.isAuthenticated() ? (
              <Redirect to="/login" />
            ) : (
              <Brand auth={auth} {...props} />
            )
          }
        />

        <Route
          path="/board"
          render={props =>
            !auth.isAuthenticated() ? (
              <Redirect to="/login" />
            ) : (
              <Board auth={auth} {...props} />
            )
          }
        />

        <Route
          path="/Profile"
          render={props =>
            !auth.isAuthenticated() ? (
              <Redirect to="/login" />
            ) : (
              <Profile auth={auth} {...props} />
            )
          }
        />

        <Route
          path="/login"
          render={props => <Login auth={auth} {...props} />}
        />
        <Route
          path="/callback"
          render={props => {
            handleAuthentication(props);
            return <Callback {...props} />;
          }}
        />
      </HashRouter>
      </Router>

如果经过身份验证，我想重定向到下一阶段的部分

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        history.replace('/board');
      } else if (err) {
        history.replace('/board');
        console.log(err);
        alert(`Error: ${err.error}. Check the console for further details.`);
      }
    });
  }

标签： reactjsreact-routerhttp-status-code-404auth0