重定向使用反应路由器

Question

我使用ReactJS并且具有形式（组分），其需要重定向到另一个组件中，如果发布请求是成功的。我刚开始使用react路由器，所以这是我尝试重定向的方式。

import React, { Component } from 'react'; 
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom'; 
import NextComponent from '/NextComponent'; 
import axios from 'axios'; 

class CurrentComponent extends Component { 

constructor() { 
    super(); 
    this.state = { 
     value: '' 
     redirect: false 
    }; 
} 

handleSubmit() { 
    axios.post('xxx/yyy', { 
     xxx: yyy 
    }) 
    .then(function() { 
     console.log('Success'); 
     this.setState({redirect: true}); 
    }) 
    .catch(function() { 
     console.log('Error'); 
    }); 
} 

render() { 
    return(
     <div> 
     <form> 
      <div className="form-group"> 
      <input type="name" placeholder="name" /> 
      </div> 
      <div className="form-group"> 
      <button type="button" onClick={this.handleSubmit.bind(this)} >Submit</button> 
      {this.state.redirect && 
      <Redirect to={{ 
      pathname: '/nextcomponent', 
      state: {from: this.state.value} 
      }} /> 
      } 
     </div> 
     <Router> 
      <Route path="/nextcomponent" component={NextComponent} /> 
     </Router> 
     </form> 
     </div> 
    ); 
} 
} 

export default PresentComponent; 

这不是重定向，我一直在试图弄清楚这一点。我确信有更好的解决方案可用，但由于缺乏知识，我不确定是否实施它。任何帮助表示赞赏。谢谢。

Answer 1

也许你没有获得这个职位的呼叫state后，尝试修改handleSubmit方法：

handleSubmit() { 
    let _this = this; 
    axios.post('xxx/yyy', { 
     xxx: yyy 
    }) 
    .then(function() { 
     console.log('Success'); 
     _this.setState({redirect: true}); 
    }) 
    .catch(function() { 
     console.log('Error'); 
    }); 
} 

更新按新代码：

class ComponentOne extends Component { 

    constructor() { 
     super(); 
     this.UpdateRoute= this.UpdateRoute.bind(this); 
     this.state = { 
      value: '' 
     }; 
     this.loggedin = false; 
    } 

    const UpdateRoute =() => (
     <Router> 
     <Route exact path="/xyz" render={() => (
      loggedin ? (
      <ComponentTwo /> 
     ) : (
      <ComponentOne /> 
     ) 
     )}/> 
     </Router> 
    ) 

    handleSubmit() { 
     let _this = this; 
     axios.post('/xyz', { 
      xxx: yyy, 
     }) 
     .then(function(response) { 
      _this.loggedin = true; 
      _this.UpdateRoute(); 
     }) 
     .catch(function() { 
      console.log('Error'); 
     }); 
    } 

    render() { 
     return(
       <div> 
      <h1>Load First</h1> 
      <button type="button" onClick={this.handleSubmit.bind(this)}>Submit</button> 
       </div> 
     ); 
    } 
} 

export default ComponentOne; 

Answer 2

这个工作对我的使用情况下，不知道你。试试这个 -

<Route exact path="/some_url" render={() => (
    submitted ? (
    <Redirect to="/profile"/> 
) : (
    <HomePage/> 
) 
)}/> 

修改您的逻辑或将其封装成<Route />就像这个例子。

Answer 3

如果你使用的反应路由器4，历史是可以通过上下文：

this.context.history.push('/some/Path'); 

所以，你会修改handleSubmit：

handleSubmit() { 
    axios.post('xxx/yyy', { 
     xxx: yyy 
    }) 
    .then(function() { 
     console.log('Success'); 
     this.context.history.push('/go/somewhere/else'); 
    }) 
    .catch(function() { 
     console.log('Error'); 
    }); 
} 

见this answer了改变历史的其他方式没有条件路由。

Answer 4

如果您使用的阵营路由器-DOM，那么请检查下面给出的链接。

https://reacttraining.com/react-router/web/example/auth-workflow

Answer 5

Redirect是的react-router不react-router-dom出口。因此，你需要将其导入，如：

import { Redirect } from 'react-router' 

Redirect doc

Answer 6

使用反应路由器2.8

我使用反应路由器的hashHistory实现这一

import { hashHistory } from 'react-router'; 

又在哪里我想重定向：

hashHistory.push('/go/somewhere/else');