动作还原后反应路由器重定向

小开

你检查过反应-路由器-还原了吗? 这个库使得用 reducx 同步反应路由器成为可能。

下面是文档中的一个示例，说明了如何使用 response-router-redux 中的 push 操作来实现重定向。

import { routerMiddleware, push } from 'react-router-redux'


// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
reducers,
applyMiddleware(middleware)
)


// Dispatch from anywhere like normal.
store.dispatch(push('/foo'))

小开

最佳答案

使用 React Router 2 + ，无论你在哪里发送操作，你都可以调用 browserHistory.push()(或者 hashHistory.push()，如果你使用 browserHistory.push()的话) :

import { browserHistory } from 'react-router'


// ...
this.props.dispatch(registerStep1Success())
browserHistory.push('/registrationStep2')

如果您使用的是异步操作创建器，那么也可以通过异步操作创建器来实现这一点。

小开

为了建立在 Eni Arinde 之前的答案的基础上(我没有评论的声誉) ，下面是如何在异步操作之后使用 store.dispatch方法:

export function myAction(data) {
return (dispatch) => {
dispatch({
type: ACTION_TYPE,
data,
}).then((response) => {
dispatch(push('/my_url'));
});
};
}

诀窍是在操作文件中而不是在简化程序中进行，因为简化程序不应该有副作用。

小开

您可以使用{ 路由器}从’反应-路由器-多姆’

下面的示例演示要推送的分派

export const registerUser = (userData, history) => {
return dispatch => {
axios
.post('/api/users/register', userData)
.then(response => history.push('/login'))
.catch(err => dispatch(getErrors(err.response.data)));
}
}

历史参数作为动作创建者的第二个参数被分配到组件中(在本例中为‘ registerUser’)

小开

signup = e => {
e.preventDefault();
const { username, fullname, email, password } = e.target.elements,
{ dispatch, history } = this.props,
payload = {
username: username.value,
//...<payload> details here
};
dispatch(userSignup(payload, history));
// then in the actions use history.push('/<route>') after actions or promises resolved.
};


render() {
return (
<SignupForm onSubmit={this.signup} />
//... more <jsx/>
)
}

小开

路由器版本4 + 的最简单解决方案: 我们使用“ response-router-dom”: “4.3.1” 它不能与版本5 + 工作

从初始化的地方导出浏览器历史记录并使用 BrowserHistory.push (’/pathToRedirect’) :

必须安装包历史记录(例如: “ history”: “4.7.2”) :

npm install --save history

在我的项目中，我在 index.js 中初始化浏览器历史记录:

import { createBrowserHistory } from 'history';


export const browserHistory = createBrowserHistory();

在行动中改变方向:

export const actionName = () => (dispatch) => {
axios
.post('URL', {body})
.then(response => {
// Process success code
dispatch(
{
type: ACTION_TYPE_NAME,
payload: payload
}
);
}
})
.then(() => {
browserHistory.push('/pathToRedirect')
})
.catch(err => {
// Process error code
}
);
});
};

小开

这是路由应用程序的工作收到

    import {history, config} from '../../utils'
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import Login from './components/Login/Login';
import Home from './components/Home/Home';
import reducers from './reducers'
import thunk from 'redux-thunk'


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


import { history } from './utils';


const store = createStore(reducers, applyMiddleware(thunk))






export default class App extends Component {
constructor(props) {
super(props);


history.listen((location, action) => {
// clear alert on location change
//dispatch(alertActions.clear());
});
}
render() {
return (
<Provider store={store}>
<Router history={history}>
<div>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
</Provider>
);
}
}


export const config = {
apiUrl: 'http://localhost:61439/api'
};
import { createBrowserHistory } from 'history';


export const history = createBrowserHistory();
//index.js
export * from './config';
export * from './history';
export * from './Base64';
export * from './authHeader';


import { SHOW_LOADER, AUTH_LOGIN, AUTH_FAIL, ERROR, AuthConstants } from './action_types'


import Base64 from "../utils/Base64";


import axios from 'axios';
import {history, config, authHeader} from '../utils'
import axiosWithSecurityTokens from '../utils/setAuthToken'




export function SingIn(username, password){




return async (dispatch) => {
if(username == "gmail"){
onSuccess({username:"Gmail"}, dispatch);
}else{
dispatch({type:SHOW_LOADER, payload:true})
let auth = {
headers: {
Authorization: 'Bearer ' + Base64.btoa(username + ":" + password)
}
}
const result = await axios.post(config.apiUrl + "/Auth/Authenticate", {}, auth);
localStorage.setItem('user', result.data)
onSuccess(result.data, dispatch);
}
}


}


export function GetUsers(){
return async (dispatch) => {
var access_token = localStorage.getItem('userToken');
axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`


var auth = {
headers: authHeader()
}
debugger
const result = await axios.get(config.apiUrl + "/Values", auth);
onSuccess(result, dispatch);
dispatch({type:AuthConstants.GETALL_REQUEST, payload:result.data})
}
}






const onSuccess = (data, dispatch) => {


const {username} = data;
//console.log(response);
if(username){
dispatch({type:AuthConstants.LOGIN_SUCCESS, payload: {Username:username }});
history.push('/');
// Actions.DashboardPage();
}else{
dispatch({ type: AUTH_FAIL, payload: "Kullanici bilgileri bulunamadi" });
}
dispatch({ type: SHOW_LOADER, payload: false });
}
const onError = (err, dispatch) => {
dispatch({ type: ERROR, payload: err.response.data });
dispatch({ type: SHOW_LOADER, payload: false });
}


export const SingInWithGmail = () => {
return { type :AuthConstants.LOGIN_SUCCESS}
}


export const SignOutGmail = () => {
return { type :AuthConstants.LOGOUT}
}

小开

使用钩子的更新答案; 用于路由器 v5用户。

正在制作 react-router-dom:5.1.2。

不需要安装外部软件包。

import { useHistory } from "react-router-dom";


function HomeButton() {
let history = useHistory();


function handleClick() {
history.push("/home");
}


return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}

您可以像以前一样使用 history。

更多细节和 API-阅读手动操作

小开

我们可以使用“连接-反应-路由器”。

    import axios from "axios";
import { push } from "connected-react-router";
    

export myFunction = () => {
return async (dispatch) => {
try {
dispatch({ type: "GET_DATA_REQUEST" });
const { data } = await axios.get("URL");
dispatch({
type: "GET_DATA_SUCCESS",
payload: data
});
} catch (error) {
dispatch({
type: "GET_DATA_FAIL",
payload: error,
});
dispatch(push("/notfound"));
}
};
};

注意——请到 https://github.com/supasate/connected-react-router阅读文档并先设置 connected-react-router，然后从 connected-react-router使用“推”。

小开

当使用 response-router-dom 版本 + 5时，不能在 redux (redux toolkit)中使用 useHistory hook。

因此，如果你想 动作发出后重定向，你可以得到你的历史“ via useHistory () hook”在你的当前页面(组件) ，然后传递历史随着你的有效负载作为一个参数还原。因此，你可以很容易地管理你的历史，在恢复后，一个动作是这样发送的: 按(“某处”)