Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
34
rated 0 times [  40] [ 6]  / answers: 1 / hits: 30089  / 7 Years ago, mon, february 27, 2017, 12:00:00

I'm looking to build a tabs component, where some of the tabs will contain dynamic content. I originally started to follow this tutorial:



Creating a tabs component with React



After reading up on react-router, it seem's like it could also solve this problem. What would be the better approach and/or does it make a difference?


More From » reactjs

 Answers
64

Yes, this is a perfect job for React Router because it focuses on simplifying the URL redirection process for Single Page Apps.


The use case of tabs for navigation, definitely falls under the scope of React Router. You can use React Router 3 or 4 for this, but the React Router 4 API is on the horizon and the documentation is looking great.


You can find a helpful example on the link above that shows how easy it is to link with tabs. And here is an example that discusses how you can create tabs with custom links.


One of the "gotchas" though that you may want to consider, is that there has been some difficulty restoring the scroll position if you navigate to a different route and then navigate back to the previous route. Here is a thread that discusses this issue further: https://github.com/ReactTraining/react-router/issues/1686.


If restoring scroll position is very important to you, then at this point React Router may not be the best fit for tabs.



Update:


React router v4 has been released, the issue above has been resolved, and now the docs have a guide on how to restore scroll position!



[#58750] Saturday, February 25, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jackie

Total Points: 442
Total Questions: 107
Total Answers: 94

Location: Honduras
Member since Sun, Dec 26, 2021
2 Years ago
jackie questions
Sat, Sep 18, 21, 00:00, 3 Years ago
Wed, Jul 14, 21, 00:00, 3 Years ago
;