All geek questions in one place

Best practices for branding NavBar in React-Bootstrap / React-Router-Bootstrap

There is a problem with anchor tags in React Bootstrap and React Router . I was curious how other people coped with the situation. You can simply leave the anchor tag with href, for example, <a href="/">Site Title</a> , and not use IndexLinkContainer . Also used is MenuItem, for example.

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

However, this leaves a frightening point towards the left edge of the navigation bar. If anyone else has ideas on how to handle this, I would appreciate it.

+6
source share
1 answer

What I did (with LinkContainer from reaction-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>

Contains the name and logo of the site. There is no bullet, but I could not find a way to avoid using LinkContainer.

+2
source

Source: https://habr.com/ru/post/1013817/

More articles:


All Articles