代码之家 › 专栏 › 技术社区 › Ashy Ashcsi

Reactjs从操作重定向

react-router redirect reactjs

Ashy Ashcsi · 技术社区 · 6 年前

我正在尝试实现react路由器版本4。请查找我现在拥有的最低代码,如下所示:

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';

export default () => (
    <BrowserRouter>
        <div>
            <div className="col-xs-12 col-sm-6 col-md-12">
                <header className="App-header">
                    <h1 className="App-title">TestUsers</h1>
                </header>
                <Menu>
                    <MenuItem>
                        <Link to="/users">Users</Link>
                    </MenuItem>
                    <MenuItem>
                        Shelves
                        </MenuItem>
                    <MenuItem>
                        Products
                    </MenuItem>
                </Menu>
            </div>
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>
)

我已成功添加用户。我想从添加用户的操作重定向到用户列表页。请在下面查找操作代码:

export function addUser(objData) {
    return function (dispatch) {
        axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                // TODO: programmatically redirect using react-router v4
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

我一直在努力实现同样的目标。谁能给我指一下正确的方向吗。

谢谢

5 回复 | 直到 6 年前

GAJESH PANIGRAHI 6 年前

您可以使用回调

export function addUser(objData, onSuccess, onFail) {
    return function (dispatch) {
        return axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                onSuccess()
            })
            .catch((error) => {
                //you can handle error on your component
                onFail(error);
            });
    }
}

然后打电话 addUser 就像部件上的这个。

addUser(
   objData,
   () => this.props.history.push('/your-user-list-component'),
   () => {// handle the error here.}
)

Tomasz Mularczyk 6 年前

你可以从行动中回报承诺:

export function addUser(objData) {
    return function (dispatch) {
        return axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                // TODO: programmatically redirect using react-router v4
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

然后在组件中:

componentDidMount(){
  this.props.addUser(objData).then(() => {
    this.props.history.push('/somwhere')
  })
}

Rachomir 6 年前

使用 this.props.history.push('/some/path') 调度操作后

我还建议您检查是否有回应。状态等于200

Joseba 6 年前

您可以使用历史记录模块。

创建历史记录。js文件

//history.js
import createHistory from 'history/createHashHistory'
export default createHistory()

用新的历史记录更新路由器。您需要使用路由器而不是BrowserRouter。

import React from 'react';
import { Router, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';
import history from './history';

export default () => (
    <Router history={history}>
       ...
    </Router>
);

现在您可以通过编程进行导航。

import history from './history'
export function addUser(objData) {
    return function (dispatch) {
        axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                // TODO: programmatically redirect using react-router v4
               history.push(path)
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

Ilanus 6 年前

在react路由器4中,引入了 <Redirect /> 组件中返回的 render() 实现您所需的方法。重定向组件也从导入 react-router-dom 因此: import { BrowserRouter, Route, Link, Redirect } from 'react-router-dom';

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

  render () {
    const { redirect } = this.state;

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}