Question

我正在学习React路由器，我似乎无法弄清楚当前推荐的重定向方式。我已经阅读了很多文章和StackOverflow帖子，但是有很多种类我不确定要为当前版本的React Router实现哪一个。

我尝试做的是在使用axios进行AJAX调用后重定向。

axios.post('/some-route')
    .then(/*I want to redirect here*/)

注意：此代码位于React.Component内部的函数内，该函数在提交表单时调用。

我如何做到这一点？

请告诉我您需要的详细信息。

Answer 1

您可以使用browserHistory：

  import { browserHistory } from "react-router";

  browserHistory.push({
     pathname: '/your/path'
  });

Answer 2

此答案适用于filter_level。

如果您想react-router-v4来自同一个redirect（而不是来自某些component）并且此action由某些component呈现，那么您可以使用route中传递了history个对象。

props

最好的方法是创建自己的componentDidMount(){ if(this.state.some_param){ this.props.history.push("/some_location") } }对象。您可以在任何history中使用此history对象。

action

然后您可以在路由器中使用此历史记录，

//history.js
import createHistory from 'history/createBrowserHistory'

export default createHistory()

现在您可以在任何地方使用此历史记录对象进行重定向，

import history from "./history"

<Router history = {history}>
    //other code
</Router>

axios.post('/some-route')
.then(res=>{
    history.push("/some_location")
})

const {Component} = React
const {render} = ReactDOM

const {Router, Link, Route, Switch, withRouter, Redirect} = ReactRouterDOM

const createHistory = History.createHashHistory

const myhistory = createHistory()

class App extends Component{
  redirectToHome(){
    myhistory.push("/home")
  }
  redirectToAbout(){
    myhistory.push("/about")
  }
  render(){
  return(
    <div>
      <Route path = "/home" component = {Home} />
      <Route path = "/about" component = {About} />
      <button onClick = {this.redirectToHome}>Redirect to home</button>
      <button onClick = {this.redirectToAbout}>Redirect to about</button>
    </div>
  )
  }
}

const Home = ()=>{
  return(
    <div>
      Home
    </div>
  )
}

const About = ()=>{
  return(
    <div>About</div>
  )
}


render(<Router history = {myhistory}><App/></Router>, document.getElementById('app'))

Answer 3

从React Router v4开始，browserHistory不再导出react-router。

你有两种可能性。

1）如果您的组件是通过路径呈现的（是component组件的<Route>道具，那么您会自动获得一些对象作为道具：

历史
匹配
位置

然后，您可以在组件的上下文中使用this.props.history.push("/some_location")

2）如果您的组件与特定路线无关，则可以使用withRouter高阶组件（react-router

的一部分来获取相同的道具

＆＃13;

import { withRouter } from "react-router-dom";

const Component = ( { history, location, match } ) => (
// your component code
);

export default withRouter(Component);

＆＃13;

什么是使用React Router进行转换/重定向的正确方法？

3 个答案: