【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(how to update react-router3.x vs 4.x)

from_v3.0.0_to_v4.0.0.js

 ////////////////////////////////////////////////////////////////////////////////////////////
// Uncaught TypeError: Cannot read property 'pathname' of undefined
//v3.0.0
import {browserHistory, IndexRoute, Redirect, Router, Route, NotFoundRoute, DefaultRoute, Link, RouteHandler} from 'react-router';

class Endpoint extends Component {
 render(){
  return (
      <Router history={browserHistory} createElement={createElement} >
        <Route path='/home/' component={App}>
            <IndexRoute component={Home} />
            <Route path='about'component={About} />
            <Route path='feature' component={Features} />
        </Route>
        <Redirect from='/home' to='/home/' />
      </Router>
    )
 }
}
window.addEventListener('DOMContentLoaded', ()=>{
 ReactDOM.render(<Endpoint />, document.querySelector('main'));
 })

//Uncaught TypeError: Cannot read property 'pathname' of undefined
// v.4.0.0

import {BrowserRouter as BrowserRouter, browserHistory, IndexRoute, Redirect, Router, Route, NotFoundRoute, DefaultRoute, Link, RouteHandler} from 'react-router-dom';

class Endpoint extends Component {
 render(){
  return (
      <BrowserRouter history={browserHistory} createElement={createElement} >
        <Route path='/home/' component={App}>
            <IndexRoute component={Home} />
            <Route path='about'component={About} />
            <Route path='feature' component={Features} />
        </Route>
        <Redirect from='/home' to='/home/' />
      </BrowserRouter>
    )
 }
}
window.addEventListener('DOMContentLoaded', ()=>{
 ReactDOM.render(<Endpoint />, document.querySelector('main'));
 })


////////////////////////////////////////////////////////////////////////////////////////////
//Uncaught Error: A <Router> may have only one child element

//v3.0.0
class Endpoint extends Component {
 render(){
  return (
      <BrowserRouter history={browserHistory} createElement={createElement} >
        <Route path='/home/' component={App}>
            <IndexRoute component={Home} />
            <Route path='about'component={About} />
            <Route path='feature' component={Features} />
        </Route>
        <Redirect from='/home' to='/home/' />
      </BrowserRouter>
    )
 }
}
//Uncaught Error: A <Router> may have only one child element
//v4.0.0  //とりあえずdivで包んでおく(Wrap with div as temporary correspondence)
class Endpoint extends Component {
 render(){
  return (
      <BrowserRouter history={browserHistory} createElement={createElement}>
       <div>
        <Route path='/home/' component={App}>
            <IndexRoute component={Home} />
            <Route path='about'component={About} />
            <Route path='feature' component={Features} />
        </Route>
        <Redirect from='/home' to='/home/' />
      </div>
      </BrowserRouter>
    )
 }
}

////////////////////////////////////////////////////////////////////////////////////////////
1 //Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`

//try below
  <BrowserRouter history={browserHistory} createElement={createElement} >
     <div>
       hogehogehoge
     </div>
  </BrowserRouter>

////////////////////////////////////////////////////////////////////////////////////////////
2 //Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.

//topLevel
<BrowserRouter history={browserHistory} createElement={createElement} >
    <div>
       <Route path='/home/' component={App} />
       <Redirect from='/home' to='/home/' />
    </div>
</BrowserRouter>
//remove <IndexRoute /> 
<IndexRoute component={Home} />
////////////////////////////////////////////////////////////////////////////////////////////
3 //Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
//App.js
//ネストさせたいRouteを含める => /home/about , /home/feature/
class App extends Component {
    render(){
        return (
            <div>
                <div>
                    <h1>App</h1>
                    <ul role="nav">
                        <li><Link to="/home/about">About</Link></li>
                        <li><Link to="/home/feature">feature</Link></li>
                    </ul>
                   //if you have IndexRoute, remove
                    //<IndexRoute component={Home} />
                    <Route path='/home/about'component={About} />
                    <Route path='/home/feature' component={Features} />
                </div>
            </div>
        )
    }
}
////////////////////////////////////////////////////////////////////////////////////////////
//Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored
//v3.0.0
//index.js
class Endpoint extends Component {
 render(){
  return (
      <BrowserRouter history={browserHistory} createElement={createElement} >
         <div>
            <Route path='/home/' component={App} >
                <Route path='/home/about'component={About} />
                <Route path='/home/feature' component={Features} />
            </Route>
            <Redirect from='/home' to='/home/' />
         </div>
      </BrowserRouter>
    )
 }
}

//v4.0
//index.js (TopLevel)

class Endpoint extends Component {
 render(){
  return (
      <BrowserRouter history={browserHistory} createElement={createElement} >
         <div>
            <Route path='/home/' component={App} />
            <Redirect from='/home' to='/home/' />
         </div>
      </BrowserRouter>
    )
 }
}
//and
//App.js
//ネストしたい子Routeを親に含める (これがベストだと思っていませんが、これでWarningは無くなります。サービス環境に合わせた解決をしていただければと思います)
class App extends Component {
    render(){
        return (
            <div>
                <div>
                    <h1>App</h1>
                    <ul role="nav">
                        <li><Link to="/home/about">About</Link></li>
                        <li><Link to="/home/feature">feature</Link></li>
                    </ul>
                    <Route path='/home/about'component={About} />
                    <Route path='/home/feature' component={Features} />
                </div>
            </div>
        )
    }
}

export default App

////////////////////////////////////////////////////////////////////////////////////////////