Javascript 不渲染的反应路由器嵌套路由

我正试图以这种方式呈现Nav组件以及任何页面内容，因为我希望能够访问Nav中的

this.props.location

（突出显示导航栏上的活动位置），因此将其分配给“/”路由并传递子路由，而不是简单地呈现它。但是，只有导航组件渲染；来自其他路由的任何组件在任何页面上呈现为

{this.props.children}

似乎在Nav中未定义。我是新来的，所以任何帮助都会很好

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>
    );
  }
}

const landingPage=（）=>{
if（Auth.isUserAuthenticated（））{
返回(
);
}否则{
返回(
);
}
};
常数路由=（）=>{
返回(
)
}
类应用程序扩展了React.Component{
render（）{
返回(
{routes（）}
);
}
}

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>
    );
  }
}

类导航扩展了React.Component
关于
{this.logInOut（）}
{this.props.children}
);
}
}

Nav.tsx组件

如果我没有弄错的话，您正在使用

react router v4

我希望能够访问Nav中的this.props.location（突出显示 导航栏上的活动位置），因此已将其分配给“/”路线和 传递子路由，而不是简单地渲染它

要能够访问

this.props.location

，

this.props.history

或

this.props.match

请使用

带路由器的高阶组件

首先，让我们使用路由器导入

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

要使用它，请使用路由器将
Nav
组件包装成
withRouter

// example code
export default withRouter(Nav);


App.tsx组件

重新组织你的路线。我强烈建议使用
开关

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

如果您想了解有关react router v4的更多信息，请阅读上的这些示例、指南和API。希望这对你有帮助
 Nav.tsx组件

如果我没有弄错的话，您正在使用
react router v4

我希望能够访问Nav中的this.props.location（突出显示
导航栏上的活动位置），因此已将其分配给“/”路线和
传递子路由，而不是简单地渲染它

要能够访问
this.props.location
，
this.props.history
或
this.props.match
请使用
带路由器的高阶组件

首先，让我们使用路由器导入

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

要使用它，请使用路由器将
Nav
组件包装成
withRouter

// example code
export default withRouter(Nav);


App.tsx组件

重新组织你的路线。我强烈建议使用
开关

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

如果您想了解有关react router v4的更多信息，请阅读上的这些示例、指南和API。希望这对你有帮助
 我已经更新了我的答案，让我知道它是否对你有帮助我已经更新了我的答案，让我知道它是否对你有帮助