upgrading react-router from 2.X to 4.x issues

Question

The project I was put in had this react web application that seems badly managed (e.g. it looks like npm packages were taken out of node_modules, and called into the web application through another file path, and had all the formatting removed so it is basically unreadable.

Tried my best to work with it as it, but i have an issue with asynchronous (which after time and time of working on, still doesn't work). I think the application as well as this asynchronous issue would benefit if i updated from 2.X to 4.X. So i deleted any mention of the old distorted react-router package, and installed a fresh latest copy in node_modules. except it seems vastly different than from before. My existing routes don't work and it also seems and GET/POST requests are also messed up?? (but cant confirm)

this is my original react-router 2.X code:

const { Router, Route, browserHistory,IndexRoute }=ReactRouter;
//(seems like there are additional references to this in webpack etc that enables it to work)

render(){
    return (
        <div>
            <Router history={browserHistory}>
                <Route name='home' path={'/'+contextName}>
                    <IndexRoute  component={LandingPage}/>
                    <Route name='templates' path='templates'>
                        <IndexRoute component={JobPage}/>
                        <Route path=':reconDate&:templateId' component={JobDetailPage}/>
                    </Route>
                <Route name='report' path='report' component={ReportPanel}/>
            </Route>
            <Route path='*' component={NotFoundPage}/>
        </Router>
    <div>

and this is what i currently have (react-router 4.X):

import { Router, Route, Switch} from 'react-router';

import createBrowserHistory from 'history/createBrowserHistory'

const customHistory = createBrowserHistory()

render(){
    return (
        <div>
            <Router history={customHistory}>
                <div>
                    <Route name='home' path={'/'+contextName} component={LandingPage}/>
                    <Switch>
                        <Route name='templates' path={'/'+contextName + 'templates'} component={JobPage}/>
                        <Switch>
                            <Route path={'/'+contextName + 'templates/:reconDate&:templateId'} component={JobDetailPage}/>
                        </Switch>
                        <Route name='report' path={'/'+contextName + 'report'} component={ReportPanel}/>
                        <Route path='*' component={NotFoundPage}/>
                    </Switch>
                </div>
            </Router>
        </div>

Can anyone help? this isn't my main issue, but i've been ripping my hair out so much from my main issue, i think it is worth a shot to upgrade react-router and see if it is easier to handle my asynchronous issue (not shown here for simplicity)

so the only paths are:

/compare (contextName = 'compare')
/compare/templates
/compare/templates/:reconDate&:templateId
/compare/report

and anything else would give the notFoundPage

Answer 1

Please use BrowserRouter and you don't need history={customHistory}. The core React Router switched to using react-router-dom.

https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a