0

Packages

"react": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"webpack": "^2.4.1"

The function that is supposed to redirect user to a new location:

successfullySignedUp()
{
        let userData = this.props.signUpResult.signUpData;
        this.saveLocalUserToBrowser(userData);
        console.log('login success', userData); // -> successful
        return (<Redirect to="/about"/>); == -> No response from command
}

I've tried other options like, 

return (<Redirect to={{ pathname: '/login' }}/>);

return (<Redirect push to="/somewhere/else"/>);

<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

I've seen examples of Redirect being imported from react-router and react-router-dom both of which don't work in my case.

I've defined my routes in Layout class:

class Layout extends React.Component
{
    render()
    {

        return (

            <Provider store={store}>
                <BrowserRouter>
                    <Switch>
                        <Route path="/about/test" component={AboutPage} />
                        <Route path="/how-it-works" component={HowItWorksPage} />
                        <Route path="/all-restaurants" component={AllRestaurantsPage} />
                        <Route path="/restaurant" component={RestaurantPage} />
                        <Route path="/faq" component={FAQPage} />
                        <Route path="/login" component={LoginPage} />
                        <Route path="/register" component={SignupPage} />
                        <Route path="/" component={HomePage} />
                        <Route path="/home" component={HomePage} />
                    </Switch>
                </BrowserRouter>
            </Provider>

        )
    }
}

and implemented it in index.js:

ReactDOM.render
(
    <Layout />,
    document.getElementById('app')
);
anonym
  • 4,460
  • 12
  • 45
  • 75
  • See this answer https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router/44128108#44128108 – Shubham Khatri Jul 17 '17 at 06:20
  • Sorry, I get the error `Cannot read property 'push' of undefined`. I have no `history` `prop` in my `props`. – anonym Jul 17 '17 at 06:28
  • you need to connect your component to withRouter HOC, See the example in the above answer – Shubham Khatri Jul 17 '17 at 06:29
  • Thanks, Shubham. One question, should I implement the `withRouter` where I define my routes (in my case, layout.js) or in the component I'm dispatching the `history.push` command? – anonym Jul 17 '17 at 06:34
  • in the component where you are dispatching history.push command – Shubham Khatri Jul 17 '17 at 06:35
  • I'm using connect to map state and dispatches to props as so: `export default connect(mapStateToProps, matchDispatchToProps)(Login)` How do I merge `withRouter` and `connect`? – anonym Jul 17 '17 at 06:36
  • withRouter(connect(...)(MyComponent)) . Also See this https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md – Shubham Khatri Jul 17 '17 at 06:38
  • Thanks. that works perfectly. However, I'm wondering why simply using `` doesn't work as shown in the documentation? – anonym Jul 17 '17 at 06:40
  • In order to use Redirect you would need to have that present in your render function return statement as specified in the following example https://reacttraining.com/react-router/web/example/auth-workflow – Shubham Khatri Jul 17 '17 at 06:46
  • Possible duplicate of [Programatically Routing based on a condition with react-router](https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router) – Shubham Khatri Jul 17 '17 at 06:46

0 Answers0