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

Question

以下是四个组成部分：

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>
  );
}

About.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 link 也不会更新。它始终是第一个 link.

我预计，当我切换选项卡时，它也会同时更改组件和地址 URL。我该怎么做？

Answer 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="/" />

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

MUI Nav Tabs does not work with react-router

reactjs

react-router

material-ui

react-router-dom

react-material