Question

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

当我单击导航栏图标（例如，徽标 img 为“localhost:3000”）时，URL 会发生变化，但未找到要显示的组件，因此该组件不会发生变化。当我在 URL 栏中输入 localhost:3000 时，它会让我回到所需的组件。

我用路由器包裹了。

这是我的 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>
);

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

提前致谢。

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

带引导程序的导航栏反应路由器不起作用

1 个答案: