reactjs - History.replace 无法使用 Auth0 从 'history/createBrowserHistory' 开始工作

Question

我尝试在应用程序中使用 history.replace('/user') 重定向用户，但是当我这样做时，它什么也没做。我正在使用 Auth0 并遵循他们的指南: https://auth0.com/docs/quickstart/spa/react/01-login

当我登录后重定向时，网址中显示 /user 但没有任何反应，我堆栈在 callback 组件上。更重要的是，如果我点击 logout ，它应该重定向到用户组件，它也不起作用。它只是在浏览器中显示 /user，并不实际将它们带到页面。

import auth0 from 'auth0-js';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

export default class Auth {
  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuth = this.handleAuth.bind(this);
    this.isAuth = this.isAuth.bind(this);
  }

  auth0 = new auth0.WebAuth({
    domain: 'taustin.auth0.com',
    clientID: 'IL1cmtElngJNYF3Ncjpt3pCRA5NFIDZw',
    redirectUri: 'http://localhost:3000/callback',
    audience: 'https://taustin.auth0.com/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

  handleAuth() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        // redirect user to home page
        history.replace('/user');
      } else if (err) {
        // redirect user to home page with error
        history.replace('/user');
      }
    });
  }

  setSession(authResult) {
    // Set how long the access token will last
    let expiresAt = JSON.stringify(
      authResult.expiresIn * 1000 + new Date().getTime()
    );
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
    // redirect user to home page or desired page
    history.replace('/user');
  }

  logout() {
    // Clear Access Token and ID Token from local storage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    // navigate to the home route
    history.replace('/user');
  }

  isAuth() {
    // Check whether the current time is past the
    // Access Token's expiry time
    // If not expires at exist should automatically return false
    let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }

  login() {
    this.auth0.authorize();
  }
}

Answer 1

我认为这应该可以解决您的问题。

import React, {Component} from 'react';
import { Router } from 'react-router';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                // your routes come here
           <Router />
       )
   }
}