反应使用React-Router-dom不起作用的React重定向



我想在ajax响应后重定向到主页,我使用了重定向,但不起作用

$.ajax({
    method: 'post',
    data: {req: data2},
    url: baseUrl+'sentOtp',
    success: function(response){
        console.log(response);
        if (response.status === "success") {
            return <Redirect to="/" />;
        }
    }
});

rout.js

ReactDOM.render(
 <Router>
  <Switch>
    <Route exact path="/" component={App} />
    <Route path="/pdeals/:BrandName/all/:Type" component={BrowseFeedDeals} />
    <Route path="/login" component={Register} />
  </Switch>
</Router>, document.getElementById('root'));
registerServiceWorker();

我使用了更新版本的React-Router-dom。但是它不会将我重定向到主页,并且没有错误的错误

您应该使用history.push。请参阅下面的示例:

index.js

    import React, { Component } from 'react'
    import { render } from 'react-dom'
    import { Router, Route, BrowserHistory as hashHistory, Switch } from 'react-router-dom'
    import './style.css'
    import history from './history.js'
    import Home from './routes/home.js'
    class App extends Component {
      constructor() {
        super()
        this.state = {
        }
      }
      render() {
        return (
          <Router history={history}>
            <Switch>
              <Route exact path='/' component={Home}/>
            </Switch>
          </Router>
        )
      }
    }
render(<App />, document.getElementById('root'));

history.js

import createHistory from 'history/createBrowserHistory'
export default createHistory()

组件

import React from 'react'
import styled from 'styled-components'
import history from '../../history.js'

export default class NavBar extends React.Component {
  linkClick() {
    history.push('/')
  }
  render() {
    return <div onClick={this.linkClick}>
    </div>
  }
}

最新更新