web-dev-qa-db-ja.com

material-uiボタンナビゲーションをreact-routerで使用することは可能ですか？

Material-UIで設計したWebアプリがあり、ボタンナビゲーションを使用して基本的なランディングページコンポーネントをナビゲートしています。

<div className="footer">
  <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
    <BottomNavigationAction label="signal" value="signal" icon={<ShowChart />} className={classes.content}/>
    <BottomNavigationAction label="hotlist" value="hotlist" icon={<HotList />} className={classes.content}/>
    <BottomNavigationAction label="analyze" value="analyze" icon={<PieChart />} className={classes.content}/>
    <BottomNavigationAction label="learn" value="learn" icon={<LibraryBooks/>} className={classes.content}/>
    <BottomNavigationAction label="dashboard" value="dashboard" icon={<PermIdentity/>} className={classes.content}/>
  </BottomNavigation>
  </div>

これらの事前定義ナビゲーションコンポーネントでReact-Routerを使用しようとしましたが、うまくいきません。マテリアルUIのボタンナビゲーションでルーターを使用する方法はありますか？ material-UIのボタンナビゲーション記事 ButtonNavigation API

reactjsreact-routermaterial-uireact-router-dom
10
El.

はい、可能です。 component propを使用する必要があります。

import { Link } from 'react-router-dom';

import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';

// ....

<BottomNavigation value={value} onChange={this.handleChange}>
    <BottomNavigationAction
        component={Link}
        to="/signal"
        label="signal"
        value="signal"
        icon={<ShowChart />}
        className={classes.content}
    />
</BottomNavigation>

（to propはReactルーターのLinkコンポーネント用）

これは、ButtonBaseを継承するMaterial-UIコンポーネントで機能します。

https://material-ui.com/api/bottom-navigation-action/

継承

ButtonBaseコンポーネントのプロパティも利用できます。この動作を利用して、ネストされたコンポーネントをターゲットにすることができます。

https://material-ui.com/api/button-base/

小道具

component-ルートノードに使用されるコンポーネント。 DOM要素またはコンポーネントを使用する文字列。

18
thirtydot