Created
December 5, 2019 06:04
-
-
Save compwron/8b2432602efa53b318722a09e6825b53 to your computer and use it in GitHub Desktop.
Notes on how to upgrade to react-router v4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
note- we use auth0, some of this is specific to that | |
steps: | |
launch and look at the UI to make sure everthing is working | |
npm update all gently (i.e "npm update" without hand-editing package.json) | |
dependencies: (these will need the ^ later but for now leave it as is until it's proven to work) | |
- "react-router": "4.4.0-beta.8", | |
- react-router-redux -> "react-router-dom": "4.4.0-beta.8", | |
- "redux-auth-wrapper": "^2.1.0", | |
(note: add the ^ after changes are done so upgrades will kick in- there are more versions already!!) | |
create configureHistory.js | |
replace all usages of react-router-redux | |
- replace push with history.push | |
Routes | |
- add auth classes/funcs | |
- un-nest routes | |
- add "exact" | |
- add leading / to each route | |
- wrap components in userIsAuthenticated | |
replace Link imports with: import {Link} from 'react-router-dom' | |
Navigation- use NavItem with to and is | |
App- export function | |
index- use ReactDOM.render, add || div for testing, use store from configureStore | |
replace this.props.params with this.props.match.params | |
replace this.props.location.query with usage of library qs | |
replace return state.routing.locationBeforeTransitions.query.redirect with | |
replace redirectUrl(getState()) with redirectUrl(history) | |
Fix UI/css errors as needed | |
mv dev.env .env # now test login and redirect on login |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment