×TypeError：无法读取未定义的属性“pathname”

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

Helpe拜托。

Answer 1

pathname未定义，因为您没有从路由道具中传递的位置道具正确地访问它。您错过了道具部分。

this.location.pathname

您似乎还试图从应用程序读取路由状态。为了使路由道具发挥作用，您需要将应用程序组件包装在react树中更高的路由器中，并将应用程序呈现为路由中，将应用程序与Wisuroter更高的顺序组件包装在应用程序中，或者将路由器呈现在应用程序中，并将页眉和页脚呈现为路由，以便它们可以检查位置。

在应用程序内容周围呈现路由器。将页眉和页脚呈现到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>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <Router>
        <Route component={Header} />
        <Routes />
        <Route component={Footer} />
      </Router>
    );
  }
}

const Header = ({ location }) => {
  ...
  return location.pathname !== "/login" ? (
    ... // header UI JSX
  ) : null;
};