4

I am trying to redirect a user to where he came from, when going to a Login component. For now, actually, I'd be happy just to redirect to a known url. In this case, '/dashboard'.

My application starts with an app.js and the routes are defined as:

render() {
        return (
            <div>
                <Router>
                    <div>
                    <Navbar />
                        <Route exact path='/' component={Home}  />
                        <Route path='/about' component={About} />
                        <Route path='/contact' component={Contact} />
                        <Route path="/login" component={Login} />
                        <Route path="/register" component={Register} /> 
                        <Route path="/profile" component={Profile} />
                        <Route path="/dashboard" component={Dashboard} />
                        <Route path="/accounts" component={AccountList} />
                        <Route path="/account" component={Account}/>
                    </div>
                </Router>
            </div>
        )
    }

I have navigated to Login, and the user has entered their credentials. I have validated against a WebAPI call, and have a success.. So I want to redirect.

I am doing this:

message = "Welcome, " + Auth.Auth.firstname();
history.push("/dashboard");

My imports for my login screen has:

import history from '../../helpers/history.js';

Where history.js is simply:

import createHistory from 'history/createHashHistory'
export default createHistory();

The push is executed, but the screen doesn't refresh. The URL simply updates to:

http://localhost:8080/login#/dashboard

If I click my 'Dashboard' nav button, the URL changes to:

http://localhost:8080/dashboard

and my screen loads the dashboard.

How should I be redirecting, problematically, when I need to?

Improve this question
5
  • Why you use createHashHistory ? And not import { createHistory } from 'history' Commented Apr 8, 2018 at 4:42
  • I'm not sure. I was trying to follow someones instruction, but this doesn't seem to work. Should I change the history.js file to use history/createHistory ? Commented Apr 8, 2018 at 5:20
  • createHashHistory is for managing urls using the # as in your example http://localhost:8080/login#/dashboard and createHistory for regular urls like http://localhost:8080/dashboard Commented Apr 8, 2018 at 5:23
  • When I change my history.js to use createHistory (Remove 'hash'), I get "_history.createHistory) is not a function". Commented Apr 8, 2018 at 5:34
  • @Craig I think you need to use: this.props.history.push('/dashboard');. I also don't believe you need to import history at all, as you should get access to it for free. Commented Apr 8, 2018 at 5:53

1 Answer 1

Reset to default
2

You need to warp up your component withRouter then usethis.props.history.push('/dashboard')

no need to import history from '../../helpers/history.js';

Read more about withRouter

You can get access to the history object's properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

import React from "react";
import { withRouter } from "react-router-dom";

class AppA extends React.Component {
  componentDidMount(){
    setTimeout(()=>{
      this.props.history.push("/b");
    },1000)
  }
  render() {
    return (
      <div>
        <h1> Component A will redirect after 1 sec </h1>
      </div>
    )
  }
}
export default withRouter(AppA);

Edit kk8pj61y0o

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You don't need to import withRouter and can export default AppA; If you modify your CodeSandbox code, removing withRouter, you'lll see it works the exact same way.
@AndyHoffman Yes but if the app doesn't have an instance of Router in its props which is giving Cannot read property 'push' of undefined.
Thanks guys. This worked perfectly. Should I be using withRouter?
@Craig I prefer you to use withRouter to avoid any future troubles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.