MUI Nav Tabs与react-router联动失效，无法切换页面更新URL如何解决

修改方案 #

1. 修正App.js，补充路由根容器

路由生效的前提是所有路由组件外层包裹BrowserRouter，修改后代码：

import React from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

export default App;

如果使用react-router-dom v6版本，替换Switch为Routes，调整Route写法即可：

// react-router-dom v6 版本App.js示例
import React from 'react';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App;

2. 重写Nav.js，绑定路由跳转与高亮状态

核心修改逻辑：

• 移除preventDefault逻辑，直接用react-router的Link作为Tab的渲染组件
• 通过useLocation获取当前路径，同步Tabs的激活状态，不需要本地维护静态计数
• Tabs的value直接对应路由路径，匹配更精准

import * as React from 'react';
import {Box,Tabs,Tab} from '@material-ui/core';
import { Link, useLocation, useNavigate } from 'react-router-dom';

function LinkTab(props) {
  return <Tab component={Link} {...props} />;
}

export default function NavTabs() {
  const location = useLocation();
  const navigate = useNavigate();

  const handleChange = (event, newValue) => {
    navigate(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Tabs value={location.pathname} onChange={handleChange} aria-label="nav tabs example">
        <LinkTab label="Home" to="/" value="/" />
        <LinkTab label="About" to="/about" value="/about" />
      </Tabs>
    </Box>
  );
}

如果使用react-router-dom v5版本，只需要替换跳转逻辑：

// v5版本Nav.js核心修改部分
import { Link, useLocation, useHistory } from 'react-router-dom';

export default function NavTabs() {
  const location = useLocation();
  const history = useHistory();

  const handleChange = (event, newValue) => {
    history.push(newValue);
  };
  // 剩余代码和v6版本完全一致
}

可选优化（非必须）

可以把NavTabs组件抽出来放在App.js全局渲染，不用在Home和About两个页面重复引入，减少冗余：

const App = () => {
  return (
    <BrowserRouter>
      <NavTabs />
      {/* 原有路由匹配逻辑 */}
    </BrowserRouter>
  )
}

修改后可以删除Home、About页面中引入NavTabs的代码。

修改完成后点击Tab即可自动更新地址栏URL，同时渲染对应路由组件，刷新页面时Tab高亮状态也会和当前路径保持同步。

内容的提问来源于stack exchange，提问作者Mijanur Rahman