是否可以在 react-router 中使用 material-ui 按钮导航？

Question

我有一个使用 material-UI 设计的网络应用程序，正如您在下面看到的，我正在使用按钮导航来浏览我的基本登陆页面组件。

<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 与这些预定义导航组件一起使用，但是没有用，有没有任何可能的方法将 Router 与 material-UI 的 Button 导航一起使用？ material-UI中的按钮导航文章 ButtonNavigation API

Answer 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 组件）

这适用于从 ButtonBase.

继承的任何 Material-UI 组件

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

Inheritance

The properties of the ButtonBase component are also available. You can take advantage of this behavior to target nested components.

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

Props

component - The component used for the root node. Either a string to use a DOM element or a component.

Answer 2

只是为了补充@thirtydot 的精彩答案，以防用户键入搜索并直接访问特定网页（默认设置除外），例如"www.yoursite.com/tab2"，而不是单击第二个按钮，这可能会导致正在显示的站点与聚焦的 BottomNav 按钮（通常是第一个按钮）之间不匹配。

这是我所做的：
我使用window.location.pathname直接获取当前路径'/tab2'。
这是我的特定用例的代码....

function BottomNavBar(){
    const pathname = window.location.pathname; // in case user visits the path directly. The BottomNavBar is able to follow suit.
    const [value, setValue] = React.useState(pathname);
    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

    return (
        <BottomNavigation value={value} onChange={handleChange} showLabels={true} >
          <BottomNavigationAction label="home" value="/" icon={<HomeIcon />} component={Link} to='/'/>
          <BottomNavigationAction label="resources" value="/resources" icon={<ResourcesIcon /> } component={Link} to='/resources'/>                
          <BottomNavigationAction label="Q&A" value="/qna" icon={<QnAIcon />}  component={Link} to='/qna'/>
          <BottomNavigationAction label="profile" value="/profile" icon={<ProfileIcon />} component={Link} to='/profile'/>
        </BottomNavigation>
      );
}

是否可以在 react-router 中使用 material-ui 按钮导航？

Is it possible to use material-ui button navigation with react-router?

reactjs

react-router

material-ui

react-router-dom

Inheritance

Props