问题

Question

我在尝试隐藏登录页面的页眉，页脚和旁边时遇到以下问题

这是我的代码：

import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Routes from './routes';


    export default class App extends Component {
      render(){
    
        return(
        <div>
        {this.location.pathname==='/Login' ? null:
        <div>
            <Header/>
            <Routes />
            <Footer />
        </div>
        }
        </div>
        )
      }
    }

我收到此错误消息 TypeError：无法读取未定义的属性“路径名”

如何防止我的页眉，页脚和页脚显示在登录页面上？

请帮助。

Answer 1

问题

未定义

pathname，因为您没有从route props传递的（大概）传递的location道具中正确访问它。您已经错过了props部分。

this.location.pathname

您似乎还试图从Route读取App状态。为了使路线道具正常工作，您需要将App组件包装在反应树中较高的Router中，并将App渲染为Route，然后包装{{1 }}与withRouter高阶组件，或渲染App in Router，并将页眉和页脚渲染为路线，以便他们可以检查位置。< / p>

解决方案

在应用内容周围呈现App。将页眉和页脚渲染到Router道具上的路线中，并检查render并有条件地渲染它们。

location.pathname

替代解决方案

与上述类似，但将export default class App extends Component { render() { return ( <Router> <Route render={(props) => location.pathname !== "/Login" ? <Header /> : null } /> <Routes /> <Route render={(props) => location.pathname !== "/Login" ? <Footer /> : null } /> </Router> ); } }检查推迟到组件。在location.pathname道具上渲染页眉和页脚，并检查传递的路线道具。

component

在export default class App extends Component { render() { return ( <Router> <Route component={Header} /> <Routes /> <Route component={Footer} /> </Router> ); } }中签入示例

Header

×TypeError：无法读取未定义的属性“路径名”

1 个答案:

问题

解决方案

替代解决方案