javascript - How to use react router with MUI tabs - Stack Overflow

admin管理员组

文章数量:1279212

Can you please explain how I make my routes work with MUI tabs? Since I don't write my code like this and do not use MUI very often, I don't understand how to make it work. any ideas please?

• I removed the imports to focus on the main problem and make the code shorter.

This is my NavBar.js Component:

  const NavBar = props => {
  const [value, setValue] = useState(0);

  const handleChange = (_e, newValue) => {
    setValue(newValue);
  };

  return (
    <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="Navigation"
        indicatorColor="primary"
        textColor="primary"
      >
        <Tab label="Home" index={0} />
        <Tab label="Favorites" index={1} />
      </Tabs>
    </AppBar>
  );
};

And my AppRouter.js Component

const AppRouter = () => {
  return (
    <ThemeProvider>
      <Router>
        <NavBar />
        <Switch>
          <Route exact path="/" ponent={Home} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

Can you please explain how I make my routes work with MUI tabs? Since I don't write my code like this and do not use MUI very often, I don't understand how to make it work. any ideas please?

• I removed the imports to focus on the main problem and make the code shorter.

This is my NavBar.js Component:

  const NavBar = props => {
  const [value, setValue] = useState(0);

  const handleChange = (_e, newValue) => {
    setValue(newValue);
  };

  return (
    <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="Navigation"
        indicatorColor="primary"
        textColor="primary"
      >
        <Tab label="Home" index={0} />
        <Tab label="Favorites" index={1} />
      </Tabs>
    </AppBar>
  );
};

And my AppRouter.js Component

const AppRouter = () => {
  return (
    <ThemeProvider>
      <Router>
        <NavBar />
        <Switch>
          <Route exact path="/" ponent={Home} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

• javascript
• reactjs
• react-router
• material-ui

Share Improve this question Follow edited Dec 17, 2021 at 0:52 zolastro 9371313 silver badges3030 bronze badges asked Dec 16, 2021 at 15:12 ArthurArthur 10111 gold badge11 silver badge44 bronze badges 2

• What have you tried? You only render one route with Home ponent on it. What are you trying to link to? You might've stripped out too much for your example. – Drew Reese Commented Dec 16, 2021 at 17:25
• In my Switch I added new Route like this: <Route exact path="/favorites" ponent={Favorites} /> But how I make it switch when I click on the Favorite Tab? I'm used to use Link from react-router to switch between pages. – Arthur Commented Dec 16, 2021 at 18:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Ok so I found the solution. In my AppRouter.js I got this:

import React from "react";
import { HashRouter as Router, Switch, Route } from "react-router-dom";
import { Home, Favorites } from "pages";
import { ThemeProvider } from "theme";
import NavBar from "ponents/NavBar";

const AppRouter = () => {
  return (
    <ThemeProvider>
      <Router>
        <NavBar />
        <Switch>
          <Route exact path="/favorites" ponent={Favorites} />
          <Route exact path="/" ponent={Home} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

export default AppRouter;

and in my NavBar.js I added this and it allows me to switch between them:

import React, { useState } from "react";
import { AppBar, Tabs, Tab } from "@material-ui/core";
import { Home, Favorites } from "pages";
import { Route, BrowserRouter, Switch, Link } from "react-router-dom";

const NavBar = props => {
  const [value, setValue] = useState(0);

  const handleChange = (_e, newValue) => {
    setValue(newValue);
  };


  return (
    <AppBar position="static" color="transparent" style={{ position: "fixed", top: 0 }}>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="Navigation"
        indicatorColor="primary"
        textColor="primary"
      >
        <Tab label="Home" index={0} ponent={Link} to={"/"} />
        <Tab label="Favorites" index={1} ponent={Link} to={"/favorites"} />
      </Tabs>
    </AppBar>
  );
};

export default NavBar;

the problem I face now is that for some reason I lose my local storage and I change my route

Did you try to add in handleChange hard coded routing, like history.push based on value? Not sure is it what you want.

I found the best solution for this is to first create a layout to define the tabs and handle the routing logic:

export default function Layout({children}: {children: any}) {
    const [tabValue, setTabValue] = useState('monitor');
    const router = useRouter();

    // Navigate to the new page
    const handleTabChange = (event: React.SyntheticEvent, newTabValue: string) => {
        
        switch(newTabValue) {
            case 'about':
                router.push('/about')
                break
            case 'monitor':
                router.push('/')
                break
        }
    };

    // Update the tab to make it active
    useEffect(() => {
        switch(router.pathname) {
            case '/':
                setTabValue('monitor')
                break
            case '/about':
                setTabValue('about')
                break
        }
    }, [router.pathname])

And then after this define each of the pages you wish the tabs to display using the Layout eg:

import Layout from '@/ponents/Layout'
import Monitor from '@/pages/Monitor';

export default function Home() {
    
    return (
        <Layout>
            <Monitor />
        </Layout>
    );
}

Here's my solution using "react-router-dom": "^6.28.0" and "@mui/material": "^6.1.8".
I'm using the createBrowserRouter method to define my routes:

sample routes:

.
.
{
  path: 'invoices/*',
  lazy: () => import('./pages/ListInvoices'),
  children: [
    { path: '*', element: <Navigate replace to="sent" /> },
    { path: 'sent', element: <SentInvoices /> },
    { path: 'received', element: <ReceivedInvoices /> },
  ],
}
.
.

ListInvoices.tsx

import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { Link, Outlet, useLocation } from 'react-router-dom';

Component.displayName = 'ListInvoicesPage';
export function Component() {
  const { pathname } = useLocation();
  const currentRoute = pathname.replace('/invoices/', '').split('/')[0];

  return (
    <>
      <Tabs value={currentRoute}>
        <Tab value="sent" label="Sent" ponent={Link} to={'../sent'} />
        <Tab value="received" label="Received" ponent={Link} to={'../received'} />
      </Tabs>
      <Outlet />
    </>
  );
}

本文标签： javascriptHow to use react router with MUI tabsStack Overflow