Solución:
Si es posible. Necesitas usar el component apuntalar:
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>
(los to prop es para React Router’s Link componente)
Esto funciona con cualquier componente Material-UI que herede de ButtonBase.
https://material-ui.com/api/bottom-navigation-action/
Herencia
Las propiedades del componente ButtonBase también están disponibles. Puede aprovechar este comportamiento para apuntar a componentes anidados.
https://material-ui.com/api/button-base/
Accesorios
component– El componente utilizado para el nodo raíz. O una cadena para usar un elemento DOM o un componente.
Solo para agregar a la gran respuesta de @thirtydot, en caso de que el usuario escribe en la búsqueda y visita una página web en particular directamente (que no sea el predeterminado), por ejemplo, “www.yoursite.com/tab2”, en lugar de hacer clic en el segundo botón, esto puede causar una discrepancia entre el sitio que se muestra y el botón BottomNav que está enfocado (generalmente el primer botón).
Aquí esta lo que hice:
solía window.location.pathname para obtener la ruta actual que es ‘/ tab2’ directamente.
Aquí está mi código para mi caso de uso particular …
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="https://foroayuda.es/" icon={<HomeIcon />} component={Link} to="https://foroayuda.es/"/>
<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>
);
}