material-ui fab href не добавляет baseurl - PullRequest
Новая
       122

material-ui fab href не добавляет baseurl

0 голосов
/ 06 августа 2020

В приложении React 16, которое использует material-ui. У меня есть FAB 

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

Приложение настроено на использование "metro" в качестве базового URL. так что все маршруты и <NavLink> добавляют к ссылке метро. пример "/dashboard" становится "metro/dashboard".

Проблема в том, что <Fab> не добавляет метро к ссылке. Как я могу это исправить?

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Пользовательский интерфейс материала не подключается к React Router (или другим решениям маршрутизации) автоматически.

Пользовательский интерфейс материала не позволяет использовать его стиль компонентов при использовании внешних компонентов для функциональности, это позволит вам использовать React Router Компонент Link DOM в качестве основы для компонента Fab Material UI.

Это достигается путем установки свойства component компонента Fab (большинство компонентов пользовательского интерфейса материала имеют это свойство). Свойства переданного компонента должны быть доступны для назначения непосредственно в компоненте 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'));

Runnable Example: https://stackblitz.com/edit/react-ts-cngowu?file=index.tsx

0 голосов
/ 06 августа 2020

Вы можете обрабатывать событие щелчка Fab и программно перемещаться, используя history.push()

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

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

Демо-коды и поле ниже

Редактировать демо материала

...