Created
December 8, 2017 18:30
-
-
Save twss/cc0a50e0b603f9b53768b986726d81f3 to your computer and use it in GitHub Desktop.
https://www.udemy.com/course-dashboard-redirect/?course_id=1134390 -- Lecture 31 (React Router v4) seems to be a little behind react-router-dom 4.2.2. Here's my fix
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
import React, { Component } from 'react'; | |
import { Route, Link } from 'react-router-dom'; | |
import Fourpointone from './Fourpointone'; | |
class Four extends Component { | |
render() { | |
return ( | |
<div> | |
<h1>I am a Four component</h1> | |
<Link to="/Four/123">Four Point One</Link> | |
{/* Define the children in here now, as per: | |
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md#nesting-routes | |
*/} | |
{/* NOTE: The position of the 'Route' is important, as it determines where the child component actually loads */} | |
<Route path="/Four/:id" component={Fourpointone} /> | |
</div> | |
); | |
} | |
} | |
export default Four; |
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
import React, { Component } from 'react'; | |
class Fourpointone extends Component { | |
render() { | |
return ( | |
<div> | |
<h2>I am a FourOne component</h2> | |
</div> | |
); | |
} | |
} | |
export default Fourpointone; |
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
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import './index.css'; | |
import registerServiceWorker from './registerServiceWorker'; | |
// Had to use 'react-router-dom' as 'react-router' was missing certain elements. | |
import { | |
BrowserRouter as Router, | |
Switch, | |
Route, | |
} from 'react-router-dom'; | |
import App from './App'; | |
import One from './One'; | |
import Two from './Two'; | |
import Three from './Three'; | |
import Four from './Four'; | |
import NoMatch from './NoMatch'; | |
ReactDOM.render( | |
<Router> | |
{/* No history as it seemed to be implicit now. */} | |
<div> | |
<Switch> | |
<Route exact path="/" component={App}></Route> | |
<Route path="/One" component={One}></Route> | |
<Route path="/Two" component={Two}></Route> | |
<Route path="/Three" component={Three}></Route> | |
{/* The children should no longer be defined here */} | |
<Route path="/Four" component={Four} /> | |
<Route component={NoMatch}></Route> | |
</Switch> | |
</div> | |
</Router> | |
, | |
document.getElementById('root')); | |
registerServiceWorker(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment