React-Bootstrap / React-Router-Bootstrap 中导航栏品牌的最佳实践

Posted 2023-02-22

【中文标题】React-Bootstrap / React-Router-Bootstrap 中导航栏品牌的最佳实践

【英文标题】：Best Practices for NavBar Branding in React-Bootstrap / React-Router-Bootstrap

【发布时间】：2017-05-20 22:22:27

【问题描述】：

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

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

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

【参考方案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 的方法..