history.pu sh не перенаправляет в создатель действий после отправки?

Question

Это мой создатель действий:

export const loginUser = (loginData, history) => (dispatch) => {

    axios.post('/signin', loginData)
        .then(res => {
            let FBIdToken = `Bearer ${res.data.token}`;
            localStorage.setItem('FBIdToken', `Bearer ${res.data.token}`);
            axios.default.headers.common['Authorization'] = FBIdToken;
            //doesn't redirect
            history.push('/');
        })
        .catch(err => {
            dispatch({
                type: SET_ERRORS,
                payload: err.response && err.response.data
            });
        });
}

Это позволяет войти в систему и поместить токен в нужное место в браузере, но по какой-то причине он не перенаправляет на домашнюю страницу, что сбивает с толку мне

когда я регистрирую историю в создателе действия, я получаю объект истории

{length: 29, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}

Я передаю историю создателю действия из компонента, и он работает, когда я sh путь в компоненте, но не работает при попытке в создателе действия!

Что неправильного в передаче истории в качестве аргумента создателю действия и почему это отличается от использования его из самого компонента? ?

РЕДАКТИРОВАТЬ:

Вход для компонента

const Login = ({ loginUser, history }) => {

    const [loginData, setLoginData] = useState({
        email: '',
        password: '',
    });

    const [errors, setErrors] = useState({});

    const handleChange = (e) => {
        setLoginData({
            ...loginData,
            [e.target.id]: e.target.value
        })
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        loginUser(loginData, history);
    }

return(
  <Form /> //can't share all the form jsx cause it is too long!
)

const mapStateToProps = (state) => {
    return {
        user: state.user,
        UI: state.UI
    }
}

export default connect(mapStateToProps, { loginUser })(Login);

компонент Приложение. js

function App() {
  return (
      <BrowserRouter  >
        <div className="App">
          <Navbar />
          <div className="container">
            <Switch>
              <Route exact path="/" component={Home} />
              <AuthRoute path="/signup" component={Signup} authenticated={authenticated} />
              <AuthRoute path="/login" component={Login} authenticated={authenticated} />
            </Switch>
          </div>
        </div>
      </BrowserRouter>
  );
}

Компонент AuthRoute:

const AuthRoute = ({ component: Component, authenticated, ...rest }) => {
    return (
        <Route
            render={props => authenticated ? <Redirect to="/" /> : <Component {...props} />}
            {...rest}
        />
    )
}

Answer 1

В приложении. js на маршрутизаторе добавьте это. Таким образом, он может распространяться на все реквизиты в ваших компонентах.

история установки:

npm i history

затем создайте экземпляр и передайте его по политике маршрутизатора

import { createBrowserHistory } from 'history';
import { Router, Route } from 'react-router-dom';

const history = createBrowserHistory();

<Router history={history}>
   <Route exact path="/mycomponent" component={MyComponent} />
</Router>