Question

我的应用程序有以下路由器设置。在下面的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>

在关于组件我有另一个子分区，所以我分别为组件保留了路由选择＆＃34;关于＆＃34;。在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>
  );
 }
}

当我点击＆＃39; AboutDetails＆＃34;将它路由到地址＆＃34; / about / details＆＃34;。然后，当我尝试点击主页链接为＆＃34; /＆＃34;或＆＃34; / home＆＃34;组件或＆＃34; / signin＆＃34;零件。它把我的地址称为＆＃34; / about /＆＃34;或＆＃34; / about / home＆＃34;或＆＃34; / about / signin＆＃34;。在地址栏中，它没有加载正确的路由URL，而是始终加上前缀＆＃34; / about＆＃34;零件。仅当我单击组件内部的组件时才会出现此问题。但不适用于＆＃34; / about＆＃34;零件。请帮我解决这个问题。

找到声明链接的下面标题代码。

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

react-router V4导航问题

0 个答案: