Question

如何在reactjs中隐藏组件

{ window.location.pathname !== "/" && <contact /> }

不起作用，问题是我试图从我的登录页面中隐藏该组件，但在所有其他子页面上显示，但是问题是当我使用该代码时，该组件从所有页面中消失了，唯一奇怪的是当我使用cmd + R刷新页面时，子页面上的组件就会出现

这也是我的App.js代码：

import React, { Component } from 'react';
import{
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';



//includes css
import './assets/css/style.min.css';
import './assets/css/header.min.css';
import './assets/css/kontakt.min.css';
import './assets/css/Kontaktformular.min.css';
import './assets/css/agatoveihriska.min.css';

//includes css-responzive
import './assets/css/style-responsive.min.css';
import './assets/css/style-responsive.min.css';

//components
import mail from './sendemail.php';
import Homepage from './components/pages/homePage';
import Kontakt from './components/pages/kontakt';
import Header from './components/headerComponent/header';
import Agatoveihriska from './components/pages/agatoveihriska.js';
import Kontaktformular from './components/repeating/kontaktformular.js';




class App extends React.Component {

  constructor(props) {
        super(props);
    }

  componentDidMount() {
        this._div.scrollTop = 0
    }



  render() {

const Home = () => <p>Home</p>;

    return (

      <Router>
        <div className="App" ref={(ref) => this._div = ref}>


            <Header  />

            <Route exact path="/" component={Home} />
            <Route  path='/Kontakt' component={Kontakt} />
            <Route  path='/Kontaktformular' component={Kontaktformular} />
            <Route  path='/Agatoveihriska' component={Agatoveihriska} />



            { window.location.pathname !== "/" && <Kontaktformular /> }



        </div>
      </Router>


    );
  }
}

export default App;

Answer 1

import { withRouter } from 'react-router-dom';

render() {
  return(
    this.props.location.pathname !== "/" && <Kontaktformular />
  )
}

export default withRouter(App);

隐藏组件的反应方式不起作用

1 个答案: