CODEWITHSUNDEEP
react-router-v4
hloughrey
hloughrey

Reputation: 978

React Router v4 - Redirect

I'm trying to get React-Router v4 up but i'm running into some difficulty. I can create routes and test them in the browser and they resolve correctly, however if i try to direct someone to a route programatically i run into problems.

The redirect should happen after the user has clicked on a row in a table, i can see the onClick works fine (so i know the callback is working) but the redirect doesn't work...any ideas?

import { Redirect } from 'react-router-dom';
export default class Table extends Component {
...
...

  onClick(foo) {
    // let path = `/booking/${foo.bar}`;
    // console.log(path);
    // <Route path="/booking" render={() => <BookingForm />}/>;
    <Redirect to='/booking' />;
  }

...
...
}

My Routes are:

const Routes = () => (
    <main>
        <Switch>
            <Route exact path='/' component={HomePage} />
            <Route exact path='/cruises' component={Cruises} />
            <Route exact path='/booking' component={BookingForm} />
        </Switch>
    </main>
);

Thanks

Upvotes: 2

Views: 3151

Answers (1)

Sa-ryong Kang
Sa-ryong Kang

Reputation: 296

I think below code should solve your problem.

import { withRouter } from 'react-router-dom';
class Table extends Component {
...
...

  onClick(foo) {
    let path = `/booking/${foo.bar}`;
    this.props.history.push(path);
  }

...
...
}

export default withRouter(Table);

Upvotes: 3

Related Questions