Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
【react-router@3.x→4.x】動かない。。アップデートで困っている人が読む記事(how to update react-router3.x vs 4.x)
////////////////////////////////////////////////////////////////////////////////////////////
// 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
////////////////////////////////////////////////////////////////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.