我对 React 有点陌生。我有一种情况,我需要在某些组件中隐藏一些导航栏链接,而在其他组件中,我想显示它们。实际上一直在使用反应路由器 V4 和打字稿。
当涉及到注册和登录页面时,需要隐藏 page1 和 page2 链接。
假设我还有一个在应用程序启动时加载的入门页面,这里我也想隐藏链接。
显示其余组件中的链接。
帮助将不胜感激
路由器代码
import * as React from 'react';
import NavBar from './NavBar';
import SignUp from './SignUp';
import Page1 from './Page1';
import Page2 from './Page2';
import Login from './Login';
import GetStarted from './GetStarted';
import { BrowserRouter as Router , Switch , Route} from 'react-router-dom';
const NotFound = () => (
<div><h1>404.. This page is not found!</h1></div>
);
export default class App extends React.Component<{}, {}> {
render() {
return(
<Router>
<div className='container'>
<NavBar/>
<div className='body'>
<Switch>
<Route exact={true} path='/' component={GetStarted}/>
<Route path='/getstarted' component={GetStarted}/>
<Route path='/signup' component={SignUp}/>
<Route path='/login' component={Login}/>
<Route path='/page1' component={Page1}/>
<Route path='/page2' component={Page2}/>
<Route component={NotFound} />
</Switch>
</div>
</div>
</Router>
)
}
}
导航栏组件
import React from 'react';
import { Link } from 'react-router-dom';
export default class NavBar extends React.Component<{}, {}> {
render() {
return (
<nav className="nav">
/*some logo will be displayed here followed by the links*/
<div className="container">
<ul className="item-wrapper">
<li>
<Link to="/page1">Link 1</Link>
</li>
<li>
<Link to="/page2">Link 2</Link>
</li>
</ul>
</div>
</nav>
);
}
}