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

Question

我对React有点陌生。 我遇到一种情况，我需要在某些组件中隐藏一些导航栏链接，而在其余组件中，我想显示它们。 实际使用的是React Router 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>
      );
    }
}

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>
        );
    }
}