React-Router ile aktif bağlantı?

Question

Ben React-Router (v4) çalışıyorum ve Link biri active olmak için Nav başlayarak sorunları yaşıyorum. Link etiketlerinden herhangi birine tıklarsam, etkin şeyler çalışmaya başlar. Ancak, / rotasında yüklenen bileşen olduğundan, uygulama başladığı anda Home Link'un aktif olmasını istiyorum. Bunu yapmanın bir yolu var mı?

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

<Link> artık activeClassName veya activeStyle özelliklere sahiptir:

İşte benim şimdiki kodudur. Eğer koşullu stil yapmak istiyorsanız <NavLink> kullanmak zorunda v4-yönlendirici tepki olarak:

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

Eve <NavLink> için tam özellik eklendi, onsuz, ev bağlantısı daima olacağını oldukça eminim /'dan beri aktif olan /about ve sahip olduğunuz diğer sayfalarla eşleşecektir. Aşağıdaki soruya verilen cevap kesinlikle doğrudur.