MUI 导航选项卡不适用于 react-router

Posted 2023-02-21

【中文标题】MUI 导航选项卡不适用于 react-router

【英文标题】：MUI Nav Tabs does not work with react-router

【发布时间】：2021-12-15 09:30:10

【问题描述】：

以下是四个组成部分：

App.js：

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

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


export default App;

Nav.js：

import * as React from 'react';
import Box,Tabs,Tab from '@material-ui/core';

function LinkTab(props) 
  return (
    <Tab
      component="a"
      onClick=(event) => 
        event.preventDefault();
      
      ...props
    />
  );


export default function NavTabs() 
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => 
    setValue(newValue);
  ;

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

关于.js：

import React from 'react'
import NavTabs from './Nav'

export default function About() 
    return (
        <div>
            <NavTabs/>
            About
        </div>
    )

Home.js：

import React from 'react'
import NavTabs from './Nav'

export default function Home() 
    return (
        <div>
            <NavTabs/>
            Home
        </div>
    )

在 Nav.js 中，当我想切换选项卡时，它不会切换到另一个选项卡。 URL 链接也不会更新。它始终是第一个链接。

在这里，我希望当我切换选项卡时，它也会更改组件和地址 URL。我该怎么做？

【参考方案1】：

来自a 元素的href 属性使整个页面刷新，这违背了react-router 的目的。在 react-router 中，您应该使用 Link 组件并提供 to 属性来告诉 react-router 在不更改应用程序状态的情况下导航到不同的路由：

// <a href='/about' ... />
<Link to='/about' ... />

您可以通过将Tab 的根组件替换为Link 而不是a 来修复它，并将href 更改为to 属性：

// <Tab component='a' label="Home" href="/" />
<Tab component=Link label="Home" to="/" />

【讨论】：

一切正常。谢谢。您在路线中使用选项卡组件。但我想在 Home 或 Contact 组件中使用 tab 组件。这可能吗？