0

私はReactに少し慣れていません。一部のコンポーネントでナビゲーション バーのリンクを非表示にする必要がある状況がありますが、残りのコンポーネントではそれらを表示したいと考えています。実際にreact router V4とtypescriptを使用しています。

サインアップ ページとログイン ページに関しては、page1 と page2 のリンクを非表示にする必要があります。

アプリケーションの起動時に読み込まれる getstarted ページもあるとします。ここでもリンクを非表示にしたいと思います。

コンポーネントの残りのリンクを表示します。

助けていただければ幸いです

ルーターコード

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

1 に答える 1

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>
        );
    }
}
于 2019-04-16T06:51:33.337 に答える