Переадресация React Router Dom от создателя избыточных действий - PullRequest
Новая
       55

Переадресация React Router Dom от создателя избыточных действий

0 голосов
/ 28 октября 2019

Я работаю в веб-приложении (созданном с использованием React + Redux + React Router Dom) и Firebase в качестве бэкэнда.

Мой вопрос: можно ли выполнить Redirect от создателя действия (так,вне компонентов домена реакции маршрутизатора)?

Например: я хочу, чтобы пользователь перенаправлялся на домашнюю страницу после операции удаления элемента: 

export const deleteItem = (item) =>{
  const id = firebase.auth().currentUser.uid;
  var itemRef = firebase.database().ref("users/"+id+"/items/"+item);
  return dispatch =>{
    dispatch({type:'DELETING_ITEM'});
    item.remove()
    .then(()=>{
      // I WANT TO REDIRECT USER TO /HOME (or anywhere else) 
    })
  }
}

Как программно выполнить перенаправление?

Ответы [ 2 ]

0 голосов
/ 28 октября 2019

Вы можете просто использовать / попробовать это, если это просто простое перенаправление. 

export const deleteItem = (item) =>{
  const id = firebase.auth().currentUser.uid;
  var itemRef = firebase.database().ref("users/"+id+"/items/"+item);
  return dispatch =>{
    dispatch({type:'DELETING_ITEM'});
    item.remove()
    .then(()=>{
        window.location.href = url
    })
  }
}
0 голосов
/ 28 октября 2019

Да, это возможно:

1-) создать файл history.js с этим содержимым. 

import createHistory from "history/createBrowserHistory";

export default createHistory();

2-) в файле, который вы настроили Маршрутизатор (в индексе. js или app.js): используйте Router из response-router-dom вместо BrowserRouter , импортируйте историю и добавьте ее в историю поддержки Router следующим образом: 

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import { Router } from "react-router-dom";
import history from "./history";
import { Provider } from "react-redux";
import store from "./store/store";

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById("root")
);

3-) используйте его в своих действиях 

import history from "../../history";

export const deleteItem = item => {
  const id = firebase.auth().currentUser.uid;
  var itemRef = firebase.database().ref("users/" + id + "/items/" + item);
  return dispatch => {
    dispatch({ type: "DELETING_ITEM" });
    item.remove().then(() => {
      // I WANT TO REDIRECT USER TO /HOME (or anywhere else)
      history.push("/home");
    });
  };
};
...