[英]React Router nested routes not rendering
I am trying to render the Nav component along with any page content in this way because I want to be able to access this.props.location
in Nav (to highlight active location on Nav bar), so have assigned it to "/" route and passing child routes rather than simply rendering it. 我试图以此方式呈现Nav组件以及所有页面内容,因为我希望能够访问Nav中的
this.props.location
(以突出显示Nav栏上的活动位置),因此已将其分配给“ /”路线并传递子路线,而不是简单地渲染它。 However, only the Nav component renders; 但是,只有Nav组件会渲染。 none of components from other routes render on any page as
{this.props.children}
seems to be undefined in Nav. 由于
{this.props.children}
在Nav中似乎未定义,其他路线的任何组件都不会在任何页面上呈现。 I am new to React so any help would be great. 我是React的新手,所以任何帮助都会很棒。
App.tsx: 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>
);
}
}
Nav.tsx Component Nav.tsx组件
You are using react-router v4
if I am not mistaken. 如果我没记错的话,您正在使用
react-router v4
。
I want to be able to access this.props.location in Nav (to highlight active location on Nav bar), so have assigned it to "/" route and passing child routes rather than simply rendering it.
我希望能够访问Nav中的this.props.location(以突出显示Nav栏上的活动位置),因此将其分配给“ /”路线并传递子路线,而不是简单地渲染它。
To be able to access this.props.location
, this.props.history
or this.props.match
use withRouter
High Order Component. 为了能够访问
this.props.location
, this.props.history
或this.props.match
withRouter
高阶组件this.props.match
使用。
First lets import withRouter
HOC. 首先让我们使用
withRouter
HOC导入。
import { withRouter } from 'react-router-dom';
To use it wrap your Nav
Component with withRouter
. 要使用它,请用
withRouter
包装您的Nav
组件。
// example code
export default withRouter(Nav);
App.tsx Component App.tsx组件
Reorganize your routes. 重新组织您的路线。 I highly suggest using
Switch
. 我强烈建议使用
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>
In your App.tsx
render method you can add nav at the top. 在
App.tsx
渲染方法中,您可以在顶部添加导航。
Let's pretend only authenticated user can see Nav Component. 假设只有经过身份验证的用户才能看到Nav组件。 In your case you don't need to access
this.props.children
. 在您的情况下,您不需要访问
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>
);
}
If you want to learn more about react-router v4
read these examples, guides and apis on react-training . 如果您想了解更多有关
react-router v4
阅读以下示例, react-training的指南和API。 Hope this helps you! 希望这对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.