Hiding some navigation bar links in some of the react components: React+ React-Router+Typescript

Question

I am a bit new to React. I have a situation where I need to hide some navigation bar links in some components where as in the rest, I want to display them. Actually been using react router V4 and typescript.

Need to hide page1 and page2 links when it comes to signup and login pages.

Say I also have a getstarted page that loads when the application is launched , here also I would like to hide the links.

Show the links in rest of the components.

Help would be appreciated

Router Code

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

Navigation Bar Component

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

alex kucksdorf · Accepted Answer · 2019-04-16 06:51:33Z

1

Since you provide a login function, surely somewhere in your state you store the information whether a user is logged in or not. Use this state to determine whether to display the links:

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

answered Apr 16, 2019 at 6:51

alex kucksdorf

2,6631 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joy08 Over a year ago

Also there is a getstarted page that comes before login page , here also I would like to hide, What do I do?

alex kucksdorf Over a year ago

That's hard to tell without knowing your complete code, but I would suggest using something similar. Check out the docs concerning authentication

Collectives™ on Stack Overflow

Hiding some navigation bar links in some of the react components: React+ React-Router+Typescript

Router Code

Navigation Bar Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Router Code

Navigation Bar Component

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related