1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Introduction to React Router</title> 8 <meta name="viewport" content="width=device-width"> 9 <meta name="description" content="Learn to use React Router, a popular routing library in the React community."> 10 <link rel="shortcut icon" href="http://sassbreak.com/favicon.ico"> 11<!-- <link rel="stylesheet" href="http://basehold.it/27"> --> 12 <link rel="canonical" href="http://sassbreak.com/intro-to-react-router/"> 13 14 <!-- Custom CSS --> 15 <link rel="stylesheet" href="/css/styles.css"> 16
16<script>
vendor: 343 bytes, lines 16-21
16 17 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 18 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 19 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 20 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 21 ga('create', '
21UA-54825201-1
vendor: 40 bytes, lines 21-23
21', 'auto'); 22 ga('send', 'pageview'); 23
23</script>
23 24</head> 25 26 <body> 27 <div class="wrapper"> 28 29<header class="main-header" role="banner"> 30 <nav class="navbar" role="navigation"> 31 <ul class="nav"> 32 <li class="nav__item"> 33 <a href="http://sassbreak.com">Articles</a> 34 </li> 35 <li class="nav__item"> 36 <a href="/about/">About</a> 37 </li class="nav__item"> 38 <li class="nav__item"> 39 <a href="/resources/">Resources</a> 40 </li> 41 </ul> 42 </nav> 43</header> 44<div class="grid panel--padded--centered"> 45 <div class="grid__col--12 break"> 46 <a class="site-logo" href="/" title="Sassbreak.com â Home"> 47 <b class="srt">Sass Break</b> 48 </a> 49 </div> 50</div> 51 52 53 <div class="grid"> 54 <div class="grid__col--12 post"> 55 56 <header class="post__header"> 57 <h1 class="headline-primary">Introduction to React Router</h1> 58 <div class="post__meta--padded"> 59 <b class="post__author">Guil Hernandez</b> 60 <b class="post__sep">â¢</b> 61 <b class="post__date"> 62 Nov 23, 2016</b> 63 </div> 64 </header> 65 66 67 68 <article class="post__content"> 69 <p>In this talk from <a href="http://nodevember.org/">Nodevember 2016</a>, <a href="https://twitter.com/guilh">Guil</a> covers essential features of React Router, a popular React library that manages navigation and rendering of components in React apps.<p> 70 71Weâll start with routing basics, then dive into React Routerâs powerful features, including:</p> 72 73<ul> 74 <style type="text/css"> 75 li { list-style: disc; } 76 </style> 77 <li>Navigating routes</li> 78 <li>Constructing a layout via nested routes</li> 79 <li>Rendering index routes and links</li> 80 <li>Styling active links</li> 81 <li>Creating routes with parameters</li> 82 <li>Displaying 404 routes and clean URLs</li> 83 <li>What's new in React Router 4</li> 84</ul> 85 86<p style="margin: 2em 0 0;"> 87
87<script async="" class="speakerdeck-embed" data-id="933e01f04ace4cc783dbd6537138bf1a" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
87 88</p> 89 90 91 92</p> 93 94 95 <a href="https://twitter.com/share" class="twitter-share twitter-share-button" data-via="sassbreak" data-size="large">Tweet this article</a> 96
96<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); 97 </script>
97 98 99 100 </article> 101 102 <div class="post__comments"> 103 <div id="disqus_thread"></div>
104<script type="text/javascript"> 105 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ 106 var disqus_shortname = 'sassbreak'; // required: replace example with your forum shortname 107 var disqus_identifier = "/intro-to-react-router/"; 108 109 /* * * DON'T EDIT BELOW THIS LINE * * */ 110 (function() { 111 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 112 dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 113 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 114 })(); 115</script>
115 116<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 117<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> 118 119 120 </div> 121 122 </div> 123</div> 124 <div class="push"></div> 125 </div> 126 <footer class="panel--centered" role="contentinfo"> 127 <div class="grid"> 128 <div class="grid__col--4"> 129 <a href="https://twitter.com/Dave_Conner" title="Dave Conner - @Dave_Conner"><img class="media__img--avatar" src="https://pbs.twimg.com/profile_images/468537320581238784/BVSoNzeI.jpeg"></a> 130 </div> 131 <div class="grid__col--4"> 132 <a class="site-logo--white" href="/" title="Home"> 133 <b class="srt">Sass Break</b> 134 </a> 135 <p class="site-desc">A simple blog about Sass. <a href="https://twitter.com/sassbreak">@sassbreak</a></p> 136 </div> 137 <div class="grid__col--4"> 138 <a href="https://twitter.com/guilh" title="Guil Hernandez - @guilh"><img class="media__img--avatar" src="https://pbs.twimg.com/profile_images/578368788535455744/WhLtbEaB.jpeg"></a> 139 </div> 140 </div> 141</footer> 142 143 </body> 144</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.