React Router嵌套路由无法呈现

时间:2017-06-13 21:47:52

标签: javascript reactjs typescript react-router-v4

我正在尝试以这种方式呈现导航组件以及任何页面内容,因为我希望能够访问导航中的this.props.location(以突出显示导航栏上的活动位置),因此已将其分配给& #34; /"路由和传递子路由而不是简单地渲染它。但是,只有Nav组件呈现;由于{this.props.children}似乎未在Nav中定义,因此其他路径中的任何组件都不会在任何页面上呈现。我是React的新手,所以任何帮助都会很棒。

App.tsx:

const landingPage = () => {
  if (Auth.isUserAuthenticated()) {
    return (
      <UserProfile/>
    );
  } else {
    return (
      <Landing />
    );
  }
};

const routes = () => {
  return (
    <Route path="/" component={Nav}>
      <Route path="/" component={landingPage}/>
      <Route path="/login" component={LoginForm}/>
      <Route path="/register" component={RegistrationForm}/>
      <Route path="/logout" component={Logout}/>
      <Route path="/about" component={About}/>
    </Route>
  )
}

class App extends React.Component<{}, null> {
  render() {
    return (
      <BrowserRouter>
        {routes()}
      </BrowserRouter>
    );
  }
}

Nav.tsx

class Nav extends React.Component<any, any> {
  constructor() {
    super();
  };

  linkActive = (link) => {
    return this.props.location.pathname.includes(link);
  };

  logInOut = () => {
    if (!Auth.isUserAuthenticated()) {
      return (
        [
          <NavItem active={this.linkActive("login")} href="/login">Login</NavItem>,
          <NavItem active={this.linkActive("register")} href="/register">Register</NavItem>
        ]
      );
    } else {
      return (
        <NavItem eventKey={"logout"} href="/logout">Logout</NavItem>
      );
    }
  };

  render() {
    return (
      <div>
        <Navbar className="fluid collapseOnSelect">
          <Navbar.Collapse>
            <Navbar.Header>
              <Navbar.Brand>
                <a href="/">Home</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <BootstrapNav>
              <NavItem active={this.linkActive("about")} href="/about">About</NavItem>
            </BootstrapNav>
            <BootstrapNav pullRight>
              {this.logInOut()}
            </BootstrapNav>
          </Navbar.Collapse>
        </Navbar>
        {this.props.children}
      </div>
    );
  }
}

1 个答案:

答案 0 :(得分:2)

Nav.tsx组件

如果我没弄错的话,你正在使用react-router v4

  

我希望能够在Nav中访问this.props.location(以突出显示   导航栏上的活动位置),所以已将其分配给&#34; /&#34;路线和   传递子路线而不是简单地渲染它。

能够访问this.props.locationthis.props.historythis.props.match使用withRouter高阶组件。

首先让我们导入withRouter HOC。

import { withRouter } from 'react-router-dom';

要使用它,请将Nav组件与withRouter包装在一起。

// example code
export default withRouter(Nav);

App.tsx组件

重组您的路线。我强烈建议您使用Switch

// We are still using BrowserRouter 
import {
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';

<Router>
  <Switch>
    <Route path="/" component={landingPage}/>
    <Route path="/login" component={LoginForm}/>
    <Route path="/register" component={RegistrationForm}/>
    <Route path="/logout" component={Logout}/>
    <Route path="/about" component={About}/>
  </Switch>
</Router>

App.tsx渲染方法中,您可以在顶部添加导航。

让我们假装只有经过身份验证的用户才能看到导航组件。在您的情况下,您不需要访问this.props.children

renderNav() {
  return (this.props.authenticated) ? <Nav /> : null;
}

render() {
  return (
    <div>
      {this.renderNav()}
      <Router>
        <Switch>
          <Route path="/" component={landingPage}/>
          <Route path="/login" component={LoginForm}/>
          <Route path="/register" component={RegistrationForm}/>
          <Route path="/logout" component={Logout}/>
          <Route path="/about" component={About}/>
        </Switch>
      </Router>
    </div>
  );
}

如果您想了解有关react-router v4的更多信息,请阅读react-training上的这些示例,指南和api。希望这能帮到你!