# Creating a Single-Page App in React using React Router **URL:** \ **Category:** programming\ **Created:** [March 20, 2017, 1:42am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201 "2017-03-20T01:42:15Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 30, 2017, 5:58am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/22 "2017-12-30T05:58:19Z")
You can try adding the `exact` prop to your Route: `` That should do it šŸ™‚ ---
**Author:** ![Changwoo\_Rhee](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/changwoo_rhee/32/8930_2.png) [@Changwoo\_Rhee](https://forum.kirupa.com/u/Changwoo_Rhee)\ **Post date:** [January 8, 2018, 4:16am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/23 "2018-01-08T04:16:01Z")
hi i have upload this source to github > **[x1wins/creating\_single\_page\_app\_react\_using\_react\_router](https://github.com/x1wins/creating_single_page_app_react_using_react_router)** > > https://www.kirupa.com/react/creating\_single\_page\_app\_react\_using\_react\_router.htm ---
**Author:** ![Asra\_Eusuph](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/asra_eusuph/32/8943_2.png) [@Asra\_Eusuph](https://forum.kirupa.com/u/Asra_Eusuph)\ **Post date:** [January 15, 2018, 9:22am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/24 "2018-01-15T09:22:07Z")
can you implement all the react JS component life cycle in a single page which have home about and contact tabs? ---
**Author:** ![Lucas\_Andrade](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/lucas_andrade/32/8960_2.png) [@Lucas\_Andrade](https://forum.kirupa.com/u/Lucas_Andrade)\ **Post date:** [January 25, 2018, 4:19pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/25 "2018-01-25T16:19:18Z")
Thank you, this tutorial helped me a lot to get start with React. ---
**Author:** ![Yalian\_Alexander](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yalian_alexander/32/9012_2.png) [@Yalian\_Alexander](https://forum.kirupa.com/u/Yalian_Alexander)\ **Post date:** [March 6, 2018, 4:36pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/26 "2018-03-06T16:36:09Z")
When i add the css it donā€™t load into the web, why this happened? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 6, 2018, 4:56pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/27 "2018-03-06T16:56:31Z")
Do you have the `import` statement for the CSS file specified? šŸ™‚ ---
**Author:** ![Yalian\_Alexander](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yalian_alexander/32/9012_2.png) [@Yalian\_Alexander](https://forum.kirupa.com/u/Yalian_Alexander)\ **Post date:** [March 6, 2018, 7:00pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/28 "2018-03-06T19:00:10Z")
yep of course, like u put it ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 6, 2018, 9:10pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/29 "2018-03-06T21:10:11Z")
Strange. If you add something like the following into your CSS, does everything look bigger? ``` * { font-size: 200px; } ``` Sometimes the selector names are misspelled or a random `.` or `#` has been added to a HTML tag selector šŸ™‚ ---
**Author:** ![gcronin](https://avatars.discourse-cdn.com/v4/letter/g/3da27b/32.png) [@gcronin](https://forum.kirupa.com/u/gcronin)\ **Post date:** [March 18, 2018, 8:00pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/30 "2018-03-18T20:00:41Z")
first & foremost, excellent series of posts - very informative and clear. Kudos to you !! Just wondering - was there any reason you did not implement the styling in the ā€˜React wayā€™ that you advocated in ā€œStyling in Reactā€, for this tutorial? thanks ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 18, 2018, 9:15pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/31 "2018-03-18T21:15:37Z")
Haha! I think you are referring to that I wrote here: > With that said, you should pick and choose the [styling] techniques that make the most sense for your situation. While I am biased towards Reactā€™s way of solving our UI development problems, Iā€™ll do my best to highlight alternate or conventional methods as well. Tying that back to what we saw here, using CSS style rules with your React content is totally OK as long as you made the decision knowing the things you gain as well as lose by doing so. There really is no ā€œone trueā€ approach haha: - For web **_sites_** like what we are basically dealing with in this example, the traditional CSS file with style rules is easier to maintain. - When Iā€™m dealing with components used as part of a larger React app, then I lean towards the ā€œReact wayā€ of styling using an object. - My preferred approach is to have a CSS file per component similar to what you see in the [todolist tutorial](https://www.kirupa.com/react/simple_todo_app_react.htm). It provides the flexibility of CSS, specificity, the cascade, and other good things. It also keeps things isolated enough to have each component be independent-ish. Use whatever approach makes sense for you. All of these approaches have their Pros and Cons šŸ˜› (Glad you like these articles! Thanks for the nice comments!!!) Cheers, Kirupa ---
**Author:** ![gaby8](https://avatars.discourse-cdn.com/v4/letter/g/7bcc69/32.png) [@gaby8](https://forum.kirupa.com/u/gaby8)\ **Post date:** [April 25, 2018, 5:54pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/32 "2018-04-25T17:54:29Z")
Thanks for sharing your work. I see that youā€™re using css. I am wondering if I should use react-bootstrap? Any advice? Thanks again! ---
**Author:** ![theeshana](https://avatars.discourse-cdn.com/v4/letter/t/77aa72/32.png) [@theeshana](https://forum.kirupa.com/u/theeshana)\ **Post date:** [May 3, 2018, 4:35am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/33 "2018-05-03T04:35:55Z")
Thanks for the tutorial. Need more help ---
**Author:** ![tmoods](https://avatars.discourse-cdn.com/v4/letter/t/cab0a1/32.png) [@tmoods](https://forum.kirupa.com/u/tmoods)\ **Post date:** [May 7, 2018, 10:47pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/34 "2018-05-07T22:47:56Z")
Thanks so much! So many of the React tutorials out there get so complex very quickly. I feel like you have a great balance of detail which is explained very clearly and in a way you donā€™t need to be an expert to implement. Exactly what I needed to carry learnings across to my own React SPA project - thanks again!! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 8, 2018, 6:09pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/35 "2018-05-08T18:09:12Z")
Glad you liked the content and the way it was presented šŸ™‚ ---
**Author:** ![Jeff\_Huang](https://avatars.discourse-cdn.com/v4/letter/j/b782af/32.png) [@Jeff\_Huang](https://forum.kirupa.com/u/Jeff_Huang)\ **Post date:** [May 28, 2018, 2:57pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/36 "2018-05-28T14:57:31Z")
Thanks, I just need clone the code from github, thatā€™s save my time. ---
**Author:** ![tomizechsterson](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tomizechsterson/32/9167_2.png) [@tomizechsterson](https://forum.kirupa.com/u/tomizechsterson)\ **Post date:** [June 11, 2018, 11:27pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/37 "2018-06-11T23:27:00Z")
Hi @kirupa , I really enjoy your articles on React. Theyā€™re extremely helpful and informative with learning React and gaining confidence with it. Iā€™m running into a bit of an issue with React Router, though. Iā€™ve adapted this tutorial into a bit larger of an app to give it navigation, but it seems that if I use components with state in the routes, I run into this warning and my app stops functioning properly after navigating away from the component with state: ā€œCanā€™t call setState on an unmounted componentā€¦ā€ Iā€™m sure itā€™s something simple that Iā€™m missing, but Iā€™ve been fighting with this for a while now and my frustration is clouding my ability to spot details. Would you mind giving some advice on increasing the complexity of an app that uses React Router? I have a project on Github that exhibits this behavior if you need to see it in action ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [June 12, 2018, 4:25pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/38 "2018-06-12T16:25:39Z")
You are running into a very common issue that everybody runs into. This blog post provides more details on what you can try: [https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html](https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html) Let me know if that helps šŸ™‚ ---
**Author:** ![tomizechsterson](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tomizechsterson/32/9167_2.png) [@tomizechsterson](https://forum.kirupa.com/u/tomizechsterson)\ **Post date:** [June 12, 2018, 6:36pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/39 "2018-06-12T18:36:32Z")
Well, see hereā€™s the thing about that. Iā€™ve run into a few articles that mention this issue, and it makes sense, but I donā€™t think Iā€™m doing this exactly. Iā€™m not using isMounted at all, and Iā€™m not using Flux for this project. Iā€™m simply calling setState in a function thatā€™s called in componentDidMount and then in a handler thatā€™s passed to a lower-level component (which itself never calls setState), which looks legal to my inexperienced eyes. [Here](https://github.com/tomizechsterson/chargen-ui)ā€™s the project Iā€™m working on that exhibits this issue. Youā€™ll see the BrowserRouter used in src/App.js and itā€™s the handleSelect(id) function in the ADD2Characters class that raises the warning. Could it have something to do with the onClick in ADD2CharacterTable? I just noticed that while looking it over again ---
**Author:** ![tomizechsterson](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tomizechsterson/32/9167_2.png) [@tomizechsterson](https://forum.kirupa.com/u/tomizechsterson)\ **Post date:** [June 12, 2018, 6:55pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/40 "2018-06-12T18:55:11Z")
I think I just managed somethingā€¦ I just made a commit to that repo that converts the ADD2CharacterTable component to a function component, and this appears to get around the issue. Would you agree with this solution, or is it just a hack made by someone who doesnā€™t know any better? šŸ™‚ ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [June 12, 2018, 7:11pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/41 "2018-06-12T19:11:13Z")
After looking through your code, I am not 100% sure why you had the original problem to begin with haha. With that said, avoiding any knowledge of state by going to a functional component is one way of avoiding this issue entirely. Since your app works fine now, I wouldnā€™t question it too much! šŸ™‚ [Previous page](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201.md?page=1) [Next page](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201.md?page=3)