Скрытие некоторых ссылок панели навигации в некоторых компонентах реагирования: React + React-Router + Typescript

Question

Я немного новичок в 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>
      );
    }
}

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