React-router routes not working in MUI AppBar tabs

Question

I am creating a react appbar using MUI and react-router, but my routing code does not seem to work. When I click on tabs of my appbar, the url does not change to the specified endpoint.

My Header (appbar) component is in header.js as below:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { AppBar } from "@mui/material";
// import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import { Tabs, Tab } from "@mui/material";
import Typography from "@mui/material/Typography";
// import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import AddHomeWorkIcon from "@mui/icons-material/AddHomeWork";

function Header() {
  const [value, setValue] = useState();
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          Welcome
        </Typography>
        <Tabs textColor="inherit" value={value} onChange={(e, value) => setValue(value)} indicatorColor="secondary">
          <Tab label="Dashboard"><Link to="/dashboard"></Link></Tab>
          <Tab label="Score"><Link to="/score"></Link></Tab>
          <Tab label="Accelarator"><Link to="/accelerator"></Link></Tab>
        </Tabs>
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{ mr: 2 }}
        >
          {/*This is a simple Menu
             Icon wrapped in Icon */}
          <MenuIcon />
          <AddHomeWorkIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
  );
}
export default Header;

And my routing is in App.js as below:

import React from "react";
import { Routes, Route } from 'react-router'
import "./App.css";
import Header from "./components/header";
// import DashboardTable from "./components/table";
// Pages
import accelerator from "./pages/Accelerator/accelarator";
import dashboard from "./pages/Dashboard/dashboard";
import landingPage from "./pages/Landing-page/landing";
import leadPage from "./pages/Lead-score/lead";


function App() {
  return (
    <div className="App">
        <Header />
        <Routes>
          <Route path="/" Component={landingPage} />
          <Route path="/dashboard" Component={dashboard} />
          <Route path="/score" Component={leadPage} />
          <Route path="/accelerator" Component={accelerator} />
        </Routes>
    </div>
  );
}

export default App;

Answer 1

The issue here is that the Header is rendering Link components that don't have any clickable area since there's no link text.

<Tab label="Dashboard">
  <Link to="/dashboard"></Link> // <-- no text, no dimension in DOM
</Tab>

You can render the Tab components as Link components however, and pass all the link props to the Tab.

Example:

<Tabs
  textColor="inherit"
  value={value}
  onChange={(e, value) => setValue(value)}
  indicatorColor="secondary"
>
  <Tab component={Link} label="Dashboard" to="/dashboard" />
  <Tab component={Link} label="Score" to="/score" />
  <Tab component={Link} label="Accelerator" to="/accelerator" />
</Tabs>

There's an additional issue with the routes. react-router-dom@6 Route components render all content on a single element prop taking a ReactNode, e.g. JSX.

<Routes>
  <Route path="/" element={<LandingPage />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/score" element={<LeadPage />} />
  <Route path="/accelerator" element={<Accelerator />} />
</Routes>