使用react-router-dom的React重定向不起作用

Question

I want to redirect to home page after ajax response I used Redirect but not working

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

Route.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();

I used react-router-dom with updated version.but it doesn't redirect me to the home page and no errors in console

Answer 1

You should use history.push. See my example below:

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()

Component

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>
  }
}