特定のページにコンポーネントを表示する方法

debugcn 投稿 Dev

ルイシュナイダー

navbarユーザーがログインするたびに表示したい

ユーザーがログインボタンを押すたびに、ページをホームページに置き換えます

私は使用状態を定義しようとしましたが、パス名が等しくない/loginか/step-two、trueに設定されているかどうかを条件に、アプリでusestateがtrueと等しい場合はナビゲーションバーを表示します

しかし、ページを更新するまでナビゲーションバーが表示されません

これが私がuseeffectで試したことです

  const [hasNavBar, setNavBar] = useState(false)
useEffect(() => {
    console.log(history.location.pathname);
    if (history.location.pathname !== '/login'|| history.location.pathname !=='/step-two'
    ) {
      setNavBar(true)
    }
  }, [])

これがコード全体です

    const App = () => {
      const [hasNavBar, setNavBar] = useState(false)
      useEffect(() => {
        console.log(history.location.pathname);
        if (history.location.pathname !== '/login' ||
          history.location.pathname !== '/step-two'
        ) {
          setNavBar(true)
        }
      }, [])
      return (
        <div>
          <SNackbar></SNackbar>
          <Router history={history}>
            <div>
              <Route path="/login" exact component={FirstLogin} />
              <Route path="/step-two" exact component={SecondLogin} />
              <Route path="/home" exact component={Home} />
              <Route path='/ranking-list' exact component={RankingListPage} />
            </div>
          </Router>
          <div>
          {hasNavBar ?
            <div>
              <BottomNavBar />
            </div> : ''
          }
          </div>
        </div>
      )
    };
    
    export default App;

更新

history.listen buを使用しようとしましたが、同じエラーが表示されます

const App = () => {
  const [hasNavBar,setnavbar]=useState(false)
  useEffect(() => {
    history.listen(()=>{
      if (history.location.pathname === '/'||history.location.pathname === '/steptwo') {
        setnavbar(false);
      }else{setnavbar(true);}
        
      
    })
    if (localStorage.getItem("token") && history.location.pathname === '/') {
      history.replace('/home');
    }
  }, [])
  return (
    <div>
      <SNackbar></SNackbar>
      <Router history={history}>
        <div>
          <Route path="/" exact component={FirstLogin} />
          <Route path="/steptwo" exact component={SecondLogin} />
          <Route path="/home" exact component={Home} />
          <Route path='/ranking-list' exact component={RankingListPage} />
        </div>
      </Router>
      {hasnavbar?
       <div 
       style={{ position: 'fixed', bottom: '0px', width: "100%", height: '80px' }}>
        <BottomNavBar />
      </div>:''
      }
    </div>
  )
};

export default App;

yahya parvar

@lissettdmが言ったように

history.listen履歴が変更されるたびに関数を呼び出すために使用する必要がありますが、
ルーター内でアプリをラップする必要はありません

history.listenusestateを使用しない場合、useeffectは更新時に実行されるため、ページを更新するたびに変更されます。

デフォルトをfalseに定義し、条件がない場合は常にelseステートメントを使用して、ルートを変更するたびに呼び出され、hasnavbarをtrueにすることができます。

  const [hasnavbar,setnavbar]=useState(false)
  useEffect(() => {
    history.listen(()=>{
      if (history.location.pathname === '/login'||history.location.pathname === '/steptwo') {
        setnavbar(false);
      }else{setnavbar(true);}   
    })
  }, [])

これがコード全体です

const App = () => {
  const [hasnavbar,setnavbar]=useState(false)
  useEffect(() => {
    history.listen(()=>{
      if (history.location.pathname === '/login'||history.location.pathname === '/steptwo') {
        setnavbar(false);
      }else{setnavbar(true);}    
    })
  }, [])
  return (
    <div>
      <SNackbar></SNackbar>
      <Router history={history}>
        <div>
          <Route path="/login" exact component={FirstLogin} />
          <Route path="/steptwo" exact component={SecondLogin} />
          <Route path="/home" exact component={Home} />
          <Route path='/ranking-list' exact component={RankingListPage} />
        </div>
      </Router>
      {hasnavbar?
       <div>
        <BottomNavBar />
      </div>:''
      }
    </div>
  )
};

export default App;

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]