![](/img/trans.png)
[英]Nested Routes in React not rendering correctly with react-router v4
[英]React Router nested routes not rendering
我试图以此方式呈现Nav组件以及所有页面内容,因为我希望能够访问Nav中的this.props.location
(以突出显示Nav栏上的活动位置),因此已将其分配给“ /”路线并传递子路线,而不是简单地渲染它。 但是,只有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>
);
}
}
导航文件
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组件
如果我没记错的话,您正在使用react-router v4
。
我希望能够访问Nav中的this.props.location(以突出显示Nav栏上的活动位置),因此将其分配给“ /”路线并传递子路线,而不是简单地渲染它。
为了能够访问this.props.location
, this.props.history
或this.props.match
withRouter
高阶组件this.props.match
使用。
首先让我们使用withRouter
HOC导入。
import { withRouter } from 'react-router-dom';
要使用它,请用withRouter
包装您的Nav
组件。
// 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
渲染方法中,您可以在顶部添加导航。
假设只有经过身份验证的用户才能看到Nav组件。 在您的情况下,您不需要访问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。 希望这对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.