material-ui fab href不加baseurl

Question

在使用 material-ui 的 React 16 应用程序中。我有这个 FAB

<Fab color = "primary" aria-label = "Add" className = {classes.fab}
     size = "small" href = "/technology/new">
    <AddIcon/>
</Fab>

应用程序配置为使用 "metro" 作为基础 URL。所以所有路线和 <NavLink> 都将地铁附加到 link。例如 "/dashboard" 变为 "metro/dashboard".

问题是 <Fab> 没有将地铁附加到 link。我该如何解决这个问题？

Answer 1

您可以处理 Fab 的点击事件并使用 history.push()

以编程方式导航

const handleClick = () => {
  alert("already in here")
  // history.push('/technology/new')
}

return (
  <Fab color="primary" aria-label="add" onClick={handleClick}>
    <AddIcon />
  </Fab>
)

下面的演示代码和框

Answer 2

Material UI 不会自动连接 React Router（或其他路由解决方案）。

Material UI 确实允许在使用外部组件实现功能时使用其组件样式，这将允许您使用 React Router DOM 的 Link组件作为 Material UI 的 Fab 组件的基础。

这是通过设置 Fab 组件的 component 属性来实现的（大多数 Material UI 的组件都有这个属性）。传入组件的属性应该可以直接在 Fab 组件上分配（参见示例）。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Switch, BrowserRouter, Route, Redirect, Link } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Hello from './Hello';
import './style.css';
import { Fab } from '@material-ui/core';

interface AppProps { }
interface AppState { }

const history = createBrowserHistory();

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <BrowserRouter 
        basename="test"
      >
        <Switch>
          <Route path="/b" render={() => <div>B</div>} />
          <Route path="/a" render={() => <div>A</div>} />
          <Redirect path="*" to="/a" />
        </Switch>
        <Fab component={Link} to='/a'>A</Fab>
        <Fab component={Link} to='/b'>B</Fab>
      </BrowserRouter>
    );
  }
}

render(<App />, document.getElementById('root'));

可运行示例：https://stackblitz.com/edit/react-ts-cngowu?file=index.tsx

Answer 3

使用 MUI 5+ 和 react-router-dom 6+，您可以使用 react-router-dom Link 组件包装 FAB 组件。

<Link to="/your-path">
  <Fab color="primary" aria-label="add">
    <AddIcon />
  </Fab>
</Link>

material-ui fab href不加baseurl

material-ui fab href does not add baseurl

reactjs

floating-action-button

material-ui