javascript - link - redirect react router v4
¿Cómo puedo diseñar el enlace activo en react-router v4? (6)
Si tiene un problema en el que su menú de navegación funciona, excepto que no se actualiza correctamente al hacer clic en los enlaces y la ruta cambia, pero funciona bien si presiona F5, puede hacer esto:
Probablemente esto ocurra porque está utilizando Redux, que tiene un método shouldComponentUpdate Lifecycle en su función de connect . Probablemente tienes tu componente Nav envuelto en connect . Todo esto está bien. shouldComponentUpdate es lo que está arruinando tu vida.
Para solucionarlo, simplemente lleve el enrutador a su función mapStateToProps :
// This lets shouldComponentUpdate know that the route changed,
// which allows the Nav to re-render properly when the route changes, woot!
const mapStateToProps = (state) => {
return {
router: state.router,
}
}
// or, if you prefer pro style destructure shorthand:
const mapStateToProps = ({ router }) => ({ router })
Si no está del todo seguro de dónde proviene state.router , proviene del archivo en el que combina sus reductores y verá algo como esto:
import { combineReducers } from ''redux''
import { routerReducer } from ''react-router-redux''
import authReducer from ''./components/auth/auth_reducer''
export default combineReducers({
router: routerReducer,
auth: authReducer,
})
Aquí hay algunos HTML y CSS para un bonito Baller Nav Link:
HTML
<ul id="Nav_menu">
<li>
<NavLink
to="/home"
className="Nav_link"
activeClassName="activeRoute"
activeStyle={{ color: ''teal'' }}
>
HOME
</NavLink>
</li>
<li>
<NavLink
to="/products"
className="Nav_link"
activeClassName="activeRoute"
activeStyle={{ color: ''teal'' }}
>
PRODUCTS
</NavLink>
</li>
</ul>
NOTA: Si está vinculando a "/" , coloque el apoyo exact en NavLink.
CSS
#Nav_menu {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.Nav_link:link {
color: #fff;
font-size: 1.6rem;
line-height: 1.6rem;
text-decoration: none;
}
.Nav_link:visited {
color: #fff;
}
.Nav_link:hover {
color: yellow;
}
.Nav_link:active {
color: teal;
}
.activeRoute {
background-color: yellow;
border-bottom: 0.4rem solid teal;
cursor: not-allowed;
}
Observe activeStyle en el marcado HTML. Esta era la única forma en que podía cambiar el color del texto en la ruta / enlace activo. No funcionó cuando puse color: teal; en la activeRoute CSS activeRoute . Abra esto en otra pestaña: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
Si no sabes por qué usé rem lugar de px . Esta es una gran oportunidad para que usted investigue la accesibilidad web y font-size: 10px; base font-size: 10px; .
Mantente en forma y diviértete.
En react-router v3 teníamos activeStyle y activeClassName para diseñar el enlace activo
podríamos hacer algo como esto
<div id="tags-container">
{tags.map(t =>
<Link
className="tags"
activeStyle={{ color: ''red'' }}
to={t.path}
>
{t.title}
</Link>
)}
</div>
Quiero saber cómo puedo hacer lo mismo en v4?
Ampliando la respuesta de @agm1984 : la solución de NavLinks no es actualizar los estilos correctamente, que estaba usando routerReducer de react-router-redux , no me ha funcionado. En lugar de eso, descubrí que el problema era que el contenedor de connect usa shouldComponentUpdate e impedía que se volviera a enviar el componente que contenía NavLinks.
La solución correcta en mi situación fue pasar el objeto de opciones para connect como 4to parámetro como se muestra a continuación:
export default connect(mapStateToProps, null, null, { pure: false })(NavItems);
Este ejemplo de la documentación del enlace personalizado de react-router v4 lo ayudará a lograrlo:
const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact }) => (
<Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
<div className={match ? ''active'' : ''''}>
{match ? ''> '' : ''''}<Link to={to}>{label}</Link>
</div>
)}/>
);
Así que en tu caso podrías crear el siguiente componente:
const CustomLink = ({ activeStyle, children, className, to, activeOnlyWhenExact }) => (
<Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
<Link to={to} className={className} style={match && activeStyle}>{children}</Link>
)}/>
);
Y luego usarlo como:
<div id="tags-container">
{tags.map(t =>
<CustomLink
className="tags"
activeStyle={{ color: ''red'' }}
to={t.path}
>
{t.title}
</Link>
)}
</div>
Puedes hacerlo con NavLink en react-router v4
<div id="tags-container">
{tags.map(t =>
<NavLink
className="tags"
activeStyle={{ color: ''red'' }}
to={t.path}
>
{t.title}
</NavLink>
)}
</div>
Todo sigue funcionando igual. Sin embargo, reaccion-router-dom v4 reemplaza el Link con NavLink
import { NavLink as Link } from ''react-router-dom''; tambien esta bien Nota: Los enlaces de navegación por defecto están activos, por lo que puede activeStyle={{color: ''red''}} a:active estilo a:active o activeStyle={{color: ''red''}}
Utilice NavLink en lugar de enlace. No está documentado, pero funciona como usted espera. https://github.com/ReactTraining/react-router/issues/4318
ACTUALIZACIÓN 17.05.2017: