在一些 react 组件中隐藏一些导航栏链接：React+ React-Router+Typescript

Question

我对 React 有点陌生。 我有一种情况，我需要在某些组件中隐藏一些导航栏链接，而在其他组件中，我想显示它们。 实际上一直在使用 react router V4 和 typescript。

在注册和登录页面时需要隐藏 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>
      );
    }
}

Answer 1

由于您提供了login 函数，因此您肯定会在您所在州的某个地方存储用户是否登录的信息。使用此状态来确定是否显示链接：

import React from 'react';
import { Link } from 'react-router-dom';
export default class NavBar extends React.Component<{}, {}> {

    render() {      
        return (
            <nav className="nav">
                <div className="container">
                    {user.loggedIn /* boolean indicating whether user is logged in */ &&
                    <ul className="item-wrapper">
                        <li>
                            <Link to="/page1">Link 1</Link>
                        </li>
                        <li>
                            <Link to="/page2">Link 2</Link>
                        </li>
                    </ul>
                    }
                </div>
            </nav>
        );
    }
}