A Pen by Brad Westfall on CodePen.
Created
January 10, 2022 09:50
-
-
Save ShaiYer/ffedcbc770b7048308a2ab680fb0f2ba to your computer and use it in GitHub Desktop.
React-Router Demo
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
<div id="root"> |
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
var { Router, Route, IndexRoute, Link, browserHistory } = ReactRouter | |
var MainLayout = React.createClass({ | |
render: function() { | |
return ( | |
<div className="app"> | |
<header className="primary-header"></header> | |
<aside className="primary-aside"> | |
<ul> | |
<li><Link to="/">Home</Link></li> | |
<li><Link to="/users">Users</Link></li> | |
<li><Link to="/widgets">Widgets</Link></li> | |
</ul> | |
</aside> | |
<main> | |
{this.props.children} | |
</main> | |
</div> | |
) | |
} | |
}) | |
var Home = React.createClass({ | |
render: function() { | |
return (<h1>Home Page</h1>) | |
} | |
}) | |
var SearchLayout = React.createClass({ | |
render: function() { | |
return ( | |
<div className="search"> | |
<header className="search-header"></header> | |
<div className="results"> | |
{this.props.children} | |
</div> | |
<div className="search-footer pagination"></div> | |
</div> | |
) | |
} | |
}) | |
var UserList = React.createClass({ | |
render: function() { | |
return ( | |
<ul className="user-list"> | |
<li>Dan</li> | |
<li>Ryan</li> | |
<li>Michael</li> | |
</ul> | |
) | |
} | |
}) | |
var WidgetList = React.createClass({ | |
render: function() { | |
return ( | |
<ul className="widget-list"> | |
<li>Widget 1</li> | |
<li>Widget 2</li> | |
<li>Widget 3</li> | |
</ul> | |
) | |
} | |
}) | |
// Note that with how CodePen works, I wasn't able to get the browserHistory to work | |
// as the article suggests. The demo works without it, but you'll want to be sure to | |
// use it in a real application | |
ReactDOM.render(( | |
<Router> | |
<Route path="/" component={MainLayout}> | |
<IndexRoute component={Home} /> | |
<Route component={SearchLayout}> | |
<Route path="users" component={UserList} /> | |
<Route path="widgets" component={WidgetList} /> | |
</Route> | |
</Route> | |
</Router> | |
), document.getElementById('root')) | |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.min.js"></script> |
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
.app { | |
display: flex; | |
} | |
aside.primary-aside { | |
width: 200px; | |
} | |
main { | |
flex: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment