javascript - link - redirect react router v4

¿Cómo puedo diseñar el enlace activo en react-router v4?

Question

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?

Answer 1

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.

Answer 2

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);

Answer 3

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>

Answer 4

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>

Answer 5

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''}}

Answer 6

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:

https://reacttraining.com/react-router/web/api/NavLink