[英]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.