javascript - react js change title

Enlace activo con React-Router?

Question

Estoy probando React-Router (v4) y tengo problemas para iniciar Nav para que uno de los Link esté active . Si hago clic en cualquiera de las etiquetas de Link , las cosas activas comienzan a funcionar. Sin embargo, me gustaría que Home Link esté activo tan pronto como se inicie la aplicación, ya que ese es el componente que se carga en la ruta / . ¿Hay alguna forma de hacer esto?

Aquí está mi código actual:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName=''is-active'' to=''/''>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName=''is-active'' to=''/about''>About</Link>
      </Nav>

      <Match pattern=''/'' exactly component={Home} />
      <Match pattern=''/about'' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

Answer 1

Sé que llego tarde a la fiesta, pero lo manejo estableciendo un estilo en línea :focus {cualesquiera que sean sus estilos}. Manejo la mayoría de los estilos en línea, pero estoy bastante seguro de que esto también funcionará en una hoja de estilo regular. Solo usa

:focus

en lugar de

:active

EDITAR

Yo, por algunas razones (principalmente software integrado), no puedo usar hojas de estilo CSS. Así que he llegado a amar el estilo en línea (en contra de la opinión, los estilos en línea han funcionado bien para un proyecto con aproximadamente 8000 líneas de código que abarcan 37 archivos, sin impacto en el rendimiento). Pero desafortunadamente, el :active selector :active tiene errores cuando se usa en línea de esta manera, por lo que utilizo el método anterior.

Otra forma de hacer esto, porque sé que los estilos en línea están mal vistos, es hacer una clase css active con los estilos que le gustaría para el elemento nav, y mantener una variable de estado para rastrear su página actual lo más arriba posible en el alcance que le resulte más cómodo (preferiblemente componente raíz) y actualícelo cuando el usuario navegue a otra página. Esto se puede hacer envolviendo <Redirect/> o <Link to={}/> con un componente funcional que maneja el estado y la navegación de actualización, y en su componente de navegación, verifique si el elemento de navegación que su representación coincide con la página actual, y si es así, agregue su clase css active .

Answer 2

<Link> ya no tiene las propiedades activeClassName o activeStyle . En react-router v4 debe usar <NavLink> si desea hacer un estilo condicional:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName=''is-active'' to=''/''>Home</NavLink>
        <NavLink activeClassName=''is-active'' to=''/about''>About</NavLink>
      </Nav>

      <Match pattern=''/'' exactly component={Home} />
      <Match pattern=''/about'' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

<NavLink> una propiedad exacta a la página de inicio <NavLink> , estoy bastante seguro de que sin ella, el enlace a la página de inicio siempre estaría activo ya que / coincidiría /about y cualquier otra página que tenga.