f:[["$","p",null,{"children":"Let's face it.\nLearning React seems hard enough."}],"\n",["$","p",null,{"children":["It only gets harder with each additional buzzword you add to the mix — GraphQL, Redux, MobX... ",["$","strong",null,{"children":"React Router"}],"... the list can seem never-ending.\nThose are all tools that have their use; there's no denying that."]}],"\n",["$","p",null,{"children":"But for someone who's just getting into the React world, they only add to confusion and complexity, and make the goal of \"knowing React\" look even more distant."}],"\n",["$","p",null,{"children":"So you figured you want your app to have several pages.\nTo be able to navigate between them."}],"\n",["$","p",null,{"children":"Do you have to dive into React-Router immediately now?\nOr is there an alternative?"}],"\n",["$","p",null,{"children":"Why yes, there is!"}],"\n",["$","p",null,{"children":"React is pretty powerful, and we can implement the simplest router in the world using one of the core mechanisms of React: state."}],"\n",["$","h2",null,{"children":"Simplest router, V1"}],"\n",["$","p",null,{"children":"If you think about it, the router is just a glorified conditional statement that decides which page to render:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"App"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," currentPage ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Index"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'b'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"PageB"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"404 Not Found"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"Storing the current page name in a local variable is not ideal as we can’t change it... so we can store it in the state instead:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"App"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n state ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n currentPage",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," currentPage ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Index"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'b'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"PageB"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Something went wrong"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":["And since ",["$","code",null,{"children":"Index"}]," might want to go to ",["$","code",null,{"children":"PageB"}],", we can pass each page a function to switch to another page:"]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"App"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n state ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n currentPage",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function-variable function","children":"goTo"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"pageName"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," currentPage",["$","span",null,{"className":"token operator","children":":"}]," pageName ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," currentPage ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Index"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"goTo"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'b'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"PageB"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"goTo"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Something went wrong"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token function-variable function","children":["$","span",null,{"className":"token maybe-class-name","children":"Index"}]}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," goTo ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h2"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Index Page"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"a"]}]," ",["$","span",null,{"className":"token attr-name","children":"onClick"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token function","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'b'"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Page B"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token function-variable function","children":["$","span",null,{"className":"token maybe-class-name","children":"PageB"}]}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," goTo ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h2"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Page B"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n"]}]}],"\n",["$","h2",null,{"children":"Pages can have additional data. Simplest router, V2"}],"\n",["$","p",null,{"children":"Some pages might need a bit of additional data.\nFor example, the profile page might need a username to show the correct profile."}],"\n",["$","p",null,{"children":"For that, we would need to make a couple of changes:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":[["$","code",null,{"children":"currentPage"}]," in the state should store not only the page name, but also additional parameters."]}],"\n",["$","p",null,{"children":["We can achieve this by storing an object like ",["$","code",null,{"children":"{ name: 'a', params: null }"}]," or ",["$","code",null,{"children":"{ name: 'profile', params: { username: 'xxx' } }"}]," in ",["$","code",null,{"children":"currentPage"}],"."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["The ",["$","code",null,{"children":"goTo"}]," function should accept additional parameters for the page."]}],"\n",["$","p",null,{"children":["Those should be stored in ",["$","code",null,{"children":"currentPage"}],"'s ",["$","code",null,{"children":"params"}],"."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["The router (aka ",["$","code",null,{"children":"App"}]," component) should pass those additional parameters to the current page."]}],"\n"]}],"\n"]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"App"}]," ",["$","span",null,{"className":"token keyword","children":"extends"}]," ",["$","span",null,{"className":"token class-name","children":"Component"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n state ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token comment","children":"// CHANGE:"}],"\n ",["$","span",null,{"className":"token comment","children":"// we are now allowing to store page's params"}],"\n currentPage",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," name",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":","}]," params",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token keyword null nil","children":"null"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token comment","children":"// CHANGE:"}],"\n ",["$","span",null,{"className":"token comment","children":"// goTo now accepts optional params for the page"}],"\n ",["$","span",null,{"className":"token function-variable function","children":"goTo"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":["pageName",["$","span",null,{"className":"token punctuation","children":","}]," params"]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," currentPage ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," name",["$","span",null,{"className":"token operator","children":":"}]," pageName",["$","span",null,{"className":"token punctuation","children":","}]," params",["$","span",null,{"className":"token operator","children":":"}]," params ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," currentPage",["$","span",null,{"className":"token operator","children":":"}]," currentPage ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n ",["$","span",null,{"className":"token function","children":"render"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," currentPage ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"state"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n ",["$","span",null,{"className":"token comment","children":"// CHANGE:"}],"\n ",["$","span",null,{"className":"token comment","children":"// since currentPage is now an object, we use currentPage.name in conditionals"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"name"}]," ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Index"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"goTo"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"currentPage",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"name"}]," ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'profile'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token comment","children":"// CHANGE:"}],"\n ",["$","span",null,{"className":"token comment","children":"// we can get the required param from currentPage.params"}],"\n ",["$","span",null,{"className":"token comment","children":"// and pass it as props"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Profile"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"goTo"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token keyword","children":"this"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"username"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"currentPage",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"params"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"username"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token punctuation","children":";"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"else"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Something went wrong"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token function-variable function","children":["$","span",null,{"className":"token maybe-class-name","children":"Index"}]}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," goTo ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h2"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Index Page"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token comment","children":"/* CHANGE: here's how we pass additional params */"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"a"]}]," ",["$","span",null,{"className":"token attr-name","children":"onClick"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token function","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'profile'"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," username",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'wolfy'"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Profile: wolfy"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n\n",["$","span",null,{"className":"token comment","children":"// username is just a regular prop"}],"\n",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token function-variable function","children":["$","span",null,{"className":"token maybe-class-name","children":"Profile"}]}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," goTo",["$","span",null,{"className":"token punctuation","children":","}]," username ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h2"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Profile of user "}],["$","span",null,{"className":"token punctuation","children":"{"}],"username",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"a"]}]," ",["$","span",null,{"className":"token attr-name","children":"onClick"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token function","children":"goTo"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'index'"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"Index"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n"]}]}],"\n",["$","h2",null,{"children":"It's Good Enough™"}],"\n",["$","p",null,{"children":"The router we have is good enough to get going.\nTo stop worrying about thousands of React libraries and start creating and experimenting."}],"\n",["$","p",null,{"children":"I've made quite a few learning projects with a similar setup back when I was learning React.\nThis is simply easier than having to dig into React Router from Day 1."}],"\n",["$","p",null,{"children":["Now, when it comes to ",["$","em",null,{"children":"production use"}],", it has some shortcomings:"]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"It does not use or update the URL in the browser's address bar (so that if I go to page B, copy the URL, and share it with you, you will see the index page (A) instead.)"}],"\n",["$","li",null,{"children":"It can't go back/forward."}],"\n",["$","li",null,{"children":"It can't prevent a transition from the current page conditionally."}],"\n",["$","li",null,{"children":"... the list goes on."}],"\n"]}],"\n",["$","p",null,{"children":["But when you’re only starting to learn React, it ",["$","em",null,{"children":"is"}]," a viable router that's just simple enough to get going."]}],"\n",["$","p",null,{"children":["Each of those can be addressed, of course... but ",["$","em",null,{"children":"when"}]," these begin to matter, you can as well learn React Router."]}],"\n",["$","p",null,{"children":"For now, though, this simplest router is Good Enough™."}],"\n",["$","h2",null,{"children":"See also"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["\n",["$","$Le",null,{"href":"/tips-finally-learn-react/","children":"5 practical tips to finally learn React in 2018"}],"\n"]}],"\n"]}]]