2017-01-06 23 views
6

Jest to kwestia dotycząca tagów kotwicznych w React Bootstrap i React Router. Byłem ciekawy, jak inni radzą sobie z tą sytuacją. Możliwe jest pozostawienie znacznika zakotwiczenia z hrefem, takim jak <a href="/">Site Title</a> i unikanie używania IndexLinkContainer. Istnieje również użycie MenuItem takich jak.Best Practices for NavBar Branding w React-Bootstrap/React-Router-Bootstrap

<Navbar.Brand> 
    <IndexLinkContainer to={{pathname: '/'}}> 
      <MenuItem>TitleName</MenuItem> 
    </IndexLinkContainer> 
</Navbar.Brand> 

Jednak pozostawia hidious wyglądający punkt kulminacyjny po lewej stronie paska nawigacyjnego. Jeśli ktokolwiek ma jakieś pomysły na rozwiązanie tego problemu, byłbym wdzięczny.

Odpowiedz

2

To co zrobiłem (z LinkContainer od reagują-Router-bootstrap):

 <LinkContainer to="/" style={{ cursor: 'pointer' }}> 
      <Navbar.Brand> 
       <span style={{ width: 95 }}>Some text</span> 
       <img src="somesrc" style={{ height:20, float:'right', marginLeft:10 }}/> 
      </Navbar.Brand> 
     </LinkContainer> 

Zawiera nazwę i logo witryny. Nie ma punktu wypunktowania, ale nie mogłem znaleźć sposobu na uniknięcie użycia LinkContainer ..