时间戳

首页 > 解决方案 > 使用反应路由器时如何在页面上取消渲染元素

javascript - 使用反应路由器时如何在页面上取消渲染元素

问题描述

所以我希望有一个导航栏，可以将用户引导到我投资组合的不同领域。我想要发生的是让导航栏和 img 一旦用户点击他们想要去的 li 就会消失。基本上希望用户登陆一个完全空白的页面，我可以在没有导航栏和 img 的情况下填写。我确定这是一个简单的解决方法，但这是我当前的路由器代码：

import React from 'react'
import myPic from '../img/cropped.png'

import '../css/homePage.css'
import About from '../components/about.js'
import Projects from '../components/projects.js'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";


class HomePage extends React.Component{

    render(){
        return(
            <Router>
                <div className = "container">
                    <img src={myPic}></img>
                    <navbar>
                        <ul>
                            <li><Link to="/about">About</Link></li>
                            <li><Link to="/projects">Projects</Link></li>
                            <li><Link to="/resume">Resume</Link></li>
                            <li><Link to="/contact">Contact</Link></li>
                        </ul>
                    </navbar>
                    <Switch>
                    <Route exact path='/about' component={About}></Route>
                    <Route exact path = '/projects' component={Projects} > </Route>
                </Switch>

            
                
                </div>
            </Router>
        )
    }



}


export default HomePage

我知道我没有填写整个 Switch 语句，只是想让其他链接正常工作。

标签： javascriptreactjs

解决方案

将您的导航栏包装成一个单独的组件，例如 .

在导出之前包装您的Navbar组件。withRouter()在组件的渲染函数中，您Navbar现在可以在条件下渲染location：

render() {
  const { location } = this.props;

  return (
    <ul>
      <li><Link to="/about">About</Link></li>
      {location.pathname === '/' && <li><Link to="/projects">About</Link></li>}
    </ul>
  );
}

有关更多详细信息，请参阅：反应路由器：withRouter()

推荐阅读