React Router: hashHistory vs browserHistory
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
[00:01] 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.
[00:18] 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.
[00:37] 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.
[00:50] 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.
[01:17] 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.
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 = () => <div><Links /></div>; 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?
another example is this line: ReactDOM.render( <App />, 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.
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
To make browserHistory work without a server you can add historyApiFallback: true to your devServer block in your webpack.config.
just so everyone is aware for this lesson use React-Router-Dom. This is the new version and works much much better.
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?