导航栏反应路由器与引导程序不起作用答案

【问题标题】：navbar react router with bootstrap not working导航栏反应路由器与引导程序不起作用
【发布时间】：2021-06-09 14:01:59
【问题描述】：

我遇到了 react-router-bootstrap 无法按预期工作的问题，我不知道为什么（它正在另一个项目中工作）

当我点击导航栏图标时 URL 发生了变化（例如，“localhost:3000”代表 logo img），但它没有找到要显示的组件，所以它不会改变组件。当我在我的 url 栏中使用 localhost:3000 键入 ENTER 时，它会让我回到所需的组件。

我把我的包裹在路由器里。

这是我的 3 个相关组件的代码。

您还有其他方法可以完成这项工作吗？

   

    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>
          <Nav.Link href='#home'>
            <div className='circle-icon bg-primary'>
              <FontAwesomeIcon icon={faCalendar} size='lg' />
            </div>
          </Nav.Link>
          <Nav.Link href='#home'>
            <div className='circle-icon bg-primary'>
              <FontAwesomeIcon icon={faComments} size='lg' />
            </div>
          </Nav.Link>
          <Nav.Link href='#home'>
            <div className='circle-icon bg-primary'>
              <FontAwesomeIcon icon={faUser} size='lg' />
            </div>
          </Nav.Link>
        </Nav>
      </Navbar>
    );

const Home = () => (
  <div className='container-home container-sm'>
    <Navigation />
    <Router>
      <Switch>
        <Route exact path='/' component={Dashboard} />
        <Route path='/newspost' component={Newspost} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/newsmanage' component={Newsmanage} />
        <Route path='/newsform' component={Newsform} />
      </Switch>
    </Router>
    <Footer />
  </div>
);

如果您有任何疑问，请随时询问代码的任何其他部分。

提前致谢。

【问题讨论】：

标签： reactjs react-router navigation react-router-bootstrap

【解决方案1】：

好的，所以我知道出了什么问题，我需要在我的 Home 组件之间使用 BROWSERROUTER 我不太明白为什么，但它的工作原理！希望它会帮助一些人:) 问题解决了！

<BrowserRouter>
      <Navigation />
      <Switch>
        <Route exact path='/' component={Dashboard} />
        <Route path='/newspost' component={Newspost} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/calendar' component={Calendar} />
        <Route path='/newsmanage' component={Newsmanage} />
        <Route path='/newsform' component={Newsform} />
      </Switch>
    </BrowserRouter>

【讨论】：

Router 要求你传递一个 history 属性，而 BrowserRouter 提供了自己的 history。