React-Bootstrap / React-Router-Bootstrap 中 NavBar 品牌的最佳实践

Question

React

Bootstrap 和 React Router 中的锚标签存在问题。我很好奇其他人如何处理这种情况。可以只留下带有 href 的锚标签，例如 <a href="/">Site Title</a> 并避免使用 IndexLinkContainer .还有使用菜单项，例如。

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

但是，这会在导航栏的最左侧留下一个看起来很可疑的子弹点。如果其他人对如何解决这个问题有任何想法，我将不胜感激。

Answer 1

这就是我所做的（使用 react-router-bootstrap 的 LinkContainer）：

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

包含站点的名称和徽标。没有要点，但我找不到避免使用LinkContainer的方法。