0

我的应用程序具有以下路由器设置。在 App.js 中存在以下代码。

 <Switch>
    <Route exact path="/" component={SignIn} />
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route exact path="/signin" component={SignIn} />
  </Switch>

在关于组件下，我有另一个子部门，因此我为“关于”下的组件单独保留了路由。在 About(/about) 组件中

class About extends Component {
render() {
  return (
    <div>
      <h3>From AboutUs page</h3>
      <Switch>
        <Route exact path='/about' component={AboutIndex}/>
        <Route path='/about/details' component={Aboutdetails}/>
      </Switch>
    </div>
  );
 }
}

当我单击“AboutDetails”链接时，它会路由到地址“/about/details”。然后，当我尝试将主页链接单击为“/”或“/home”组件或“/signin”组件时。它带我地址为“/about/”或“/about/home”或“/about/signin”。在地址栏中，它没有加载正确的路由 url，而不是它总是前缀“/about”组件。这个问题只有当我单击关于组件内部的组件。但不是“/about”组件。请帮助我如何解决此问题。

找到声明链接的以下标头代码。

<Nav>
            <LinkContainer to="/home" activeClassName="active">
              <NavItem eventKey={1}>Home</NavItem>
            </LinkContainer>
            <LinkContainer to="/about" activeClassName="active">
              <NavItem eventKey={2}>About</NavItem>
            </LinkContainer>
            <LinkContainer to="/signin" activeClassName="active">
              <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                <LinkContainer to="/home" activeClassName="active">
                  <MenuItem eventKey={3.1}>Home</MenuItem>
                </LinkContainer>
                <LinkContainer to="/about" activeClassName="active">
                  <MenuItem eventKey={3.2}>AboutUs action</MenuItem>
                </LinkContainer>
                <MenuItem eventKey={3.3}>Something else here</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.4}>Separated link</MenuItem>
              </NavDropdown>
            </LinkContainer>
          </Nav>
4

0 回答 0