This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Router: hashHistory vs browserHistory

1:39 React lesson by

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

Avatar
Jinto

Earler I used to do this.props.history.push() to navigate to a rote dynamically. Now, it throws error. How to do the same with context?

Avatar
h2m2

disagree that an express application is a general case. in fact I doubt that react has prerequisites at all, certainly not node.js.
disagree that const Home = () => ; goes without explanatory comments. It is not even worth a comment.
So if all is clear and we know everything, why do we need this lecture at all?

Avatar
h2m2

another example is this line: ReactDOM.render( , document.getElementById( 'app' ) );
That being written, without further "note that ", we are all enlighted that we are now rendering Routes into the app.

Again, if everything is clear, why the course? I feel a little bit upset with the wealth on skill shared. Literally reading, what any third person types in: I do not need a course for that.

In reply to h2m2
Avatar
Joseph

h2m2, this course does presume some familiarity with React. Sorry if that was not clear and thanks for pointing it out.

Regarding the two lines of code you mentioned requiring more explanation:

ReactDOM.render( <App />, document.getElementById( 'app' ) );
const Home = () => <div><Links /></div>

These common React usages are covered in courses like https://egghead.io/courses/react-fundamentals or https://egghead.io/courses/build-your-first-react-js-application

In reply to h2m2
Avatar
Cameron Fraser

To make browserHistory work without a server you can add historyApiFallback: true to your devServer block in your webpack.config.

We're looking at our standard, three page, single page application, and we're using hash history to keep track of the URL history in our router. In production, what we want to use is something called browser history.

If I reload over here, we can see that, rather than getting the hashtag path, we'll just get a very clean /about and /contact. In order to use this, though, you're going to need to set up your server to always return your application at any route.

Generally speaking, that means in an express application, you're just going to return index HTML every single time a URL is called. Then the single page application will take care of the routing.

The downside to not using hash history in these lessons, where we're not really going to go into setting up your server, is that when we jump to a path like /about and reload, we're not going to get that path. If we switch back to hash history, and go back to our root path, we can get to our individual routes.

We are going to get this /hashtag, /our path name, then a query string, with a parameter of underscore K, followed by some form of hash that's being used to keep track of our path so that, as we navigate through, we can simply use our back and forward buttons to navigate through that.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?