I would like implement multiple tabs navigation inside my React app, where do I start?
Hello,
I am building a large react app, and I would like to open up new tabs inside my app when the user click on some links. My app does already use React Router v6 for routing already.
I tried to do it by myself but I failed, so I would appreciate if someone showed me where do I start.
Thanks.
6 Replies
@DINO I'm a little unclear as to what you're looking for specifically. This sounds like you're just trying to make links to specific routes, which is the basics of React Router itself. Can you show us what you tried, and what didn't work? Where were you blocked exactly?
@Tony Snark thanks.
Let's say I am in the first tab and I click create a new product, then I would like to open up a new tab in my app of the new product page. It's a not route because I would like be able to switch between tabs without them being rerendered. So I fill up the product form in the second tabs and be able to go back to the first tab to do something then if I click on the second tabs to switch to the product tab I would still have my product from filled.
Just like a browser tabs navigation.
actually... it is a route. It's a route that you create dynamically. They're called "Route Parameters" and you can just... make any number of them. Basically if you have an array of tab data, you just loop over them to create the navigation, and then, you use a route parameter to make all these links work at once. say you have "open products" routes, you just have an array of those, and then they <Link> to
/products/:id which will accept any ID.
You'll need to store your form data in a context API since route states are lost when you navigate out of them... but I think this is the best solution for what you're trying to do
See https://reactrouter.com/en/main/route/route for detailsThank you very much. The thing is I hope I could find a way that doesn't require me to store anything in localstorage, because I might open a lot of routes and I have to enable localstorage in most of the pages. I thought about having each tab its own
Router but I guess this hack would way too difficult to implement.I wouldn't think you need to store anything in localStorage, most implementations would be done with some context API or global state like redux or zustand.
if you want persistence then you'd use a backend to store this anyways, if I understand correctly it's more of a shopping cart which definitely needs a backend, you can't trust the client only with this
Thank you very much. I will try to implement it today and see how it goes.