私は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 を使用しようとしましたが、うまくいきませんでした。material-UI のボタン ナビゲーションで Router を使用する方法はありますか?material-UI のボタン ナビゲーションの記事ボタンナビゲーション API
ベストアンサー1
はい、可能です。次のcomponent
プロップを使用する必要があります:
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
プロパティはReact Routerのコンポーネント用ですLink
)
これは、 から継承する任意の Material-UI コンポーネントで機能しますButtonBase
。
https://material-ui.com/api/bottom-navigation-action/
継承
ButtonBase コンポーネントのプロパティも利用できます。この動作を利用して、ネストされたコンポーネントをターゲットにすることができます。
https://material-ui.com/api/button-base/
小道具
component
- ルート ノードに使用されるコンポーネント。DOM 要素またはコンポーネントを使用する文字列。