React Router Bootstrap 导航栏组件无法正常渲染问题排查与解决方案咨询

嘿，我仔细看了你的代码，马上发现了问题的核心——Navigation组件不在Router的上下文范围内！

你现在的结构是Home组件里先渲染Navigation，再渲染Router（里面包含路由规则）。但react-router-bootstrap的LinkContainer本质上依赖react-router的上下文来同步路由状态：当你点击LinkContainer时，它确实能修改URL，但因为它不在Router包裹的区域内，Router根本感知不到这个URL变化，自然不会触发对应组件的渲染。而直接在地址栏输入回车是浏览器发起的完整页面加载，Router能正常捕获初始路由并匹配组件，所以这时候是正常的。

具体修复步骤 #

1. 扩大Router的包裹范围，让Navigation也被包含进去，确保所有导航组件都在路由上下文里。
2. 顺便清理代码里重复的<Route path='/calendar' component={Calendar} />，避免冗余。

修改后的代码示例：

const Navigation = () => (
  <Navbar>
    <LinkContainer to='/'>
      <Navbar.Brand>
        <img src={Logo} alt='logo' className='navbar-logo' />
      </Navbar.Brand>
    </LinkContainer>
    <Nav className='ml-auto'>
      <LinkContainer exact to='/newspost'>
        <Nav.Link>
          <div className='circle-icon bg-primary'>
            <FontAwesomeIcon icon={faNewspaper} size='lg' />
          </div>
        </Nav.Link>
      </LinkContainer>
      {/* 建议把下面几个用href的Nav.Link也改成LinkContainer，保持路由跳转一致性 */}
      <LinkContainer to='/calendar'>
        <Nav.Link>
          <div className='circle-icon bg-primary'>
            <FontAwesomeIcon icon={faCalendar} size='lg' />
          </div>
        </Nav.Link>
      </LinkContainer>
      <LinkContainer to='/comments'>
        <Nav.Link>
          <div className='circle-icon bg-primary'>
            <FontAwesomeIcon icon={faComments} size='lg' />
          </div>
        </Nav.Link>
      </LinkContainer>
      <LinkContainer to='/profile'>
        <Nav.Link>
          <div className='circle-icon bg-primary'>
            <FontAwesomeIcon icon={faUser} size='lg' />
          </div>
        </Nav.Link>
      </LinkContainer>
    </Nav>
  </Navbar>
);

const Home = () => (
  <div className='container-home container-sm'>
    <Router>
      <Navigation /> {/* 现在Navigation在Router内部，能获取路由上下文了 */}
      <Switch>
        <Route exact path='/' component={Dashboard} />
        <Route path='/newspost' component={Newspost} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/newsmanage' component={Newsmanage} />
        <Route path='/newsform' component={Newsform} />
      </Switch>
      <Footer />
    </Router>
  </div>
);

额外小提示 #

• 你原来的几个Nav.Link用了href='#home'，这是锚点跳转，不会触发路由切换，如果这些也是要跳转到对应页面的，建议统一改成LinkContainer包裹，保证所有导航行为都由react-router管理。
• 如果修复后还是有问题，可以检查react-router-dom和react-router-bootstrap的版本是否兼容，尽量使用匹配的版本组合。

内容的提问来源于stack exchange，提问作者Jérôme BORGA