React & Material UI #19: Tabs + Tabs with React Router 

I don't know if you're aware ... but your youtube channel is mentioned on the official Material UI page in the Getting Started ( Free Videos) section. They too realize that the quality here is top-notch! Keep up the good work !!! and yeah, Liked and Subscribed ages ago.

Man, Material UI has so many complexities I didn't anticipate. Thanks for the down to earth explanations Anthony!

omg!! I've been much time tryng to do that and you suddenly give a simple way to do it. God bless you bro. and grettings from colombia 🙌

You are too good man. People like you make front-end seem easy.

After watching tons of video on material UI this is the best...it helped me a lot..thank you, Anthony...Keep making videos

Clear and nice narrative. A lot of youtubers talk as if they just gotten up from bed

Mannnnn i have spent 15 hours searching for this I finally found it Thanks soooo much i love u man

I have recently started my front end journey and this has been very informative. I like how you break things down to the actual components and then build up from there.

I can't thank you enough. I'm trying to make a portfolio website to showcase my personal projects and your video tutorials have been very helpful.

this helped me a lot as I could not find any other detailed/updated resource around this topic ! Thank you good sir :D

Great video. Thank you for explaining!

Amazing introduction to Tabs!! Your videos are SO helpful when using Material UI!!

awesome, exactly what i was looking for! lots of thanks

great video. Thanks Anthony!

Thank you Anthony for all the hard work.

Thanks for this Anthony. This is by far the most concise MUI Tab tutorial I have seen. I've subscribed, looking forward to your future content :)

I learned a lot, as usual. Thanks a bunch. Topic recommendation - Table pagination and sorting.

Thank you bro, what you taught came in handy. Even in React Router v6 😅

Thank you Anthony! You helped to save a lot of time for me! Very useful tutorial!

I've been looking all over for a good tutorial on material-ui tabs. This was perfect! Thanks for making it!

I just liked the whole playlist and started watching!!!

I've been searching for a playlist like this. This is awesome. Thanks Anthony 🙏

Good job explaining every aspect very clearly!

Thank you Anthony for your time and efforts, really loved the video. Hoping to see more in future

Hey man, awesome content. Wanted to find out more about Mui, ended up watching whole series, and subscribing ofc. Clear and concise. Keep up with the good work. (Y)

Such an amazing tutorial for a React beginner! Thanks a ton man!

Thank you for the tutorial!

Excellent tutorial series, mate, very helpful - if something is unclear for me in official docs (I am kinda new to React and Material UI), I am checking out the episode concerning unclear component or concept. I like your way of teaching, that it is neither just follow-along-but-dont-understand-theory series, nor just "dry" presentation of components, it is well explained. You definitely deserve to be linked in official Material UI docs in section "Learn" :-) Movie liked, channel subscrib'd!

very helpful!! Thank you sooooooo much!!

Keep up the good work mate! Love your videos

You should geht in Touch With Brad from Traversy Media. He kind of withdraws a little bit and maybe you have a chance to broadcast via his channel as guest speaker. I appreciate your work.

great video,would love to see you build something making use of material ui components in a complex application and know your recommended practices in React

Loved it! Your explanations are so lucid ❤

This is soooo what I needed. Thank you so much!

This is so sick...learnt so much on this!!!Thanks.please could you do something on select and how it could be used to change external data.Thanks ahead

godlike tutorial

Loving all these tutorials, been trying to get into MUI for awhile and its never made sense so these really help, one suggestion and I know you have done the Theming and Styles video but it would be good when you do video like these to just do a short this is how to theme/style these components.

update september 8 2021 : import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab';

commenting here bcz loved your content and want YT algorithm to boost your video...

Question, Why would you want the first button to be "About" and for the default behavior of "/" to take you to your "About" page, and not to your"Home" page? I have tried restructuring this a few different ways to suit my needs but I get errors no matter what i do. I want three buttons- the first of which is "Home," then "Button 2" then "Button 3." I'm only a student, however, I looked at your code and I can't for the life of me determine how "Home.jsx" is tied to your App component. Do .jsx files behave differently from .js files, or am I just missing something? Also, i'm on react-router-dom v6, and while I was mostly able to translate your demo at whichever earlier version into v6, I ran into some problems with the params part..

This is magic man ! Very dope series :D

Great as always. Thanks mate

Please wich version of router-dom eas used for this example? Notice error imported Switch and other method from react-router-dom

Facing problem when user clicks on page 1(about) component data its should show page 2(contact) iam using usehistory but cant navigate pls help

can you code the tabs to close instead of open if they are clicked a second time for example: click tab 1 to open it click tab 1 again to close it

Hey Anthony, the hooks call that you use - const [selectedTab, setSelectedTab] = React.useState(indexToTab[page]); Now this is responsible for rendering the needed tab when we refresh the URL right? But hooks work only in functional components, I want to implement the same functionality in a class Component because my code demands so. Basically what happens right now is when I click on the Tabs I can view the pages however if I try to change the URL, it does not work. So, how can I fix that? I am stuck here for the past 3 days. Please help!

May Allah reward you ❤️️

Thank You so much it helped me a lot

Thanx Buddy

I have a tab with router like this ，but I have many components inside the tab ,for example at the about page I make two about detail component I want to click this component to /home/about/01 and click another about routes to /home/about/02 both item I want to keep the current about tabs how can I achieved this?

Could you suggest how to change the bottom border color (which is in red in your example) ? I can't find the right element to target to design it ! thanks

What if you have two AppBars with each one having their own tabs. How do we differentiate the index then?

wow, I fully understand!!

How do you make each tab have it's own scrollbar? If i have a long list on one page that i was scrolling, when i switch tabs, the scroll stays in the same place.

It would be nice to have a tutorial of a more common design, live left hand side menu with collapsible buttons and then the content on the right. All responsive of course! :)

nice tutorial

many thx for the video!!!

Pure awesome!!!

Hi Anthony you are doing amazing work, kindly make a video on state managment plzzz!!

I have three tabs in my component, routing is working on tab click, but when I click browser back button the routing is not working. url is changing but the particular tab content is not displaying . pls suggest if any changes needed

The codesandbox shows blank, could you please add it to fix it.. Appreciate the content and explanation.

super nice. thanks. One question: why not use useParams/useHistory hook? (innocent question)

Thank you for this video, I’ve got a question though, regarding the URLs of tabs: in my project I have quite the same situation as described here but I need to get the ID of tab displayed in the url when clicking on it as well, so that it would look something like this: home/contact#phone or home/contact#email What else do I need to add to the code in the example so that the ID would get passed too?

Hi Anthony, great tutorial, but I've found a bug and I can't deal with it. In your example browser button back doesn't work. Url changes but the page doesn't rerender. Any ideas how to deal with it?

Thanks! I was stuck for a bit finding my way around routing. Thought giving every routes in a single component like was bad practice lol

I found one issue. If the user clicked browser back button, Tab is not getting chenged

Great Video! Thank you. I think there is a small issue when you add the tab to the history and hit the back button the tab is not shown. Any idea how to fix?

how can i add some logic to my tabs i want to show a Login tab if the user is not logged in like that {user.login ? ( ) : ( )} but it doesnt like it inside a fragment and i cant think about a solution to this problem codesandbox.io/s/serene-rosalind-qstrl?file=/src/Home.jsx this is the example please help!

It was awesome) You saved my life)) Thanks)

very love it .And Thank you

When i tried, AppBar with "position static" didn't took any margin or space at the beginning.

Hi Anthony, Your Content is very useful for me. I have one doubt that can we render more than one component with different url in specific tab. For Example If I go to About Tab and currently it is displaying component inside it with home/about Suppose I have and also which I need to show in About Tab but with separate urls like home/about1 and home/about2 respectively. Hope I'm able to explain my problem statement. Looking Forward for positive reply. Thanks !!

Hi, thanks for this video! You're amazing! I had a question. Can I achieve the same use case if I use the component to route between the paths instead of using history.push? Are both equivalent or is one better over the other?

Does it still work? I get Error: Invalid hook call

Thank you for the video. So if we're doing the routing in the home.jsx that means we don't have to do in the app.js like a regular React app?

A very useful and instructive video, I like you how didn't assume I'm a genius with tons of background knowledge! Just subbed. I am still stuck on one thing however. Using your exact code, I have added a separate component containing links to invoke /about and /contact tabs but can't find out how to fire the handleTabChange function from this separate file.

i am not sure what happened, there's an error says "TypeError: Cannot destructure property 'params' of 'match' as it is undefined.", what is it that can be wrong?

Awesome...

Thank you much

While you don't "have to" learn the a11y part, it's better to get used to doing it. Make it part of your default process, and maybe one day accessibility will be the default rather than something "inconvenient" or "low priority".

Hi and congratulations for this awesome course! I'm tryng to integrate tabs with a appbar following your example but there's some problem about links. Do you know some example that are structered with appbar and tabs? Is it possible to drive tabs beahaviour from link in a main navbar (including active point tabs selector)? Thanks, Regards.

how can you change the colour under the selected tab? i cant find any doc about that and the answers at SOF simply doesn't work... =(

Great videos! I'm trying to implement this feature mixed with the pokedex/pokemon and i can't figure out how to pass history to the pokemon component for routing. It says that history is undefined. I used the tab method here. So if there was a pokedex tab and you click on a pokemon in that pokedex. How do you make the route for the individual pokemon? Thanks for all the help!!

love the part cat meowing🐱

Nothing is showing up on the codesanbox. Is it supposed to?

how can we make a Tab with Image ??

Can you make a video using Tabpanel also

Hi could you please provide an example of having a dropdown with multiple select and list the pokemons where we can select the multiple pokemons using checkbox on the dropdown and then it shows up on the component. I needed for my project and was having hard time doing that . Please help and also your videos are awesome.

how can we put tabs inside tab docs.google.com/document/d/1AJHAdKQJugm0iLjIAk7B2V4dPtyf8oFvg4lMpXSt_iI/edit?usp=sharing my issue i cant see inside tab anything but tab inside tab working properly only text remain hidden dont know why this issue is with children props is their any other way ?

MUI tabs are not that great right now. It has few bugs and not flexible enough. You can have tab scroll arrows for example, but no way to make clean use of it with variable number of tabs. Also it has width issues in some scenarios.

Great!!!!! please make for Drawers

Hello thank you for great tutorials!!! I ask you to take the same detailed course on Ant-design,we really need it, thank you in advance.(don't forget about responsive design!)

What are you doing, I got headaches from the frequent back and forth on the page

You could have just use url for state, instead of doing this tab state syncing stuff

Is anyone else having routing issues after deploying it ?

this is why sometimes I hate using Material UI..

The examples in the Material UI docs are absolutely horrible for the most part, compared to the docs of any other component ui library for React or Angular. They make the simplest thing look a like a Google interview question about Graphs.

Thanks for your work!