React Router：TypeError：无法读取未定义的属性“getCurrentLocation”

Posted 2023-02-21

【中文标题】React Router：TypeError：无法读取未定义的属性“getCurrentLocation”

【英文标题】：React Router: TypeError: Cannot read property 'getCurrentLocation' of undefined

【发布时间】：2021-10-19 15:42:13

【问题描述】：

我对 React 整体来说是新手，对 React Router 也很陌生。我正在构建一个显示评论列表的应用程序，当用户单击评论卡时，他们会被重定向到显示该卡详细信息的页面。我有大部分的逻辑编码，但我正在努力实现 React 路由器。到目前为止，这是我的组件。

import React from 'react';
import  ReviewCollection  from './components/ReviewCollection';
import  ReviewCard  from './components/ReviewCard';
import  Route, Router, browserHistory  from 'react-router';

class App extends React. Component 

  render() 
    return (
      <Router >
         <Router history=browserHistory />
         <ReviewCollection />
          <Route path="/details" component=ReviewCard />
      </Router>
    );
  


export default App;

import React from 'react';
import ReviewCard from './ReviewCard';
import  reviews  from '../data';
import reactLocalStorage from 'reactjs-localstorage';
import  browserHistory  from 'react-router';

class ReviewCollection extends React.Component 

    goToDetails = (review) => 
        reactLocalStorage.set('selectedReview', review);
       browserHistory.push('/details');
      ;

      render() 
          return (
                <div className='card-collection'>
                    reviews
                    .filter((review, idx) => idx < 24)
                    .map((review) => (
                     <div onClick=() => this.goToDetails(review)>
                     <ReviewCard key=review.id review=review />
                      </div>
                    ))
            </div>
          )
      


export default ReviewCollection;

import React from 'react';
import  reviews  from '../data';
import StarRatings from 'react-star-ratings';
import './Review.css';  

 const ReviewCard= ( review ) => 
  return (  
    <div class="card-deck">
      reviews.map((review) => 
        return (
         <div class="card">
          <div key=review.id>
            <h4 class="card-title">review.place</h4>
            <StarRatings
                rating=review.rating
                starRatedColor="gold" 
                starDimension="20px"
                />
            <div class="card-body">review.content</div>
            <div class="card-footer">review.author - review.published_at</div> 
            
      </div>
      </div>
        );
      )
      </div> 
          );
      ;
  
export default ReviewCard;

我不确定我的路线整体编写方式是否朝着正确的方向前进，在浏览器中，我收到此错误：“TypeError: Cannot read property 'getCurrentLocation' of undefined”有人可以帮我找出问题吗？谢谢

编辑#1 谢谢各位的建议。这是我的 App.js 组件，因为我已经开始实现 react-router-dom 而不是 react router：

import React from 'react';
import  ReviewCollection  from './components/ReviewCollection';
import  ReviewCard  from './components/ReviewCard';
import  BrowserRouter, Router, Route  from 'react-router-dom'; 
import history from './history';


class App extends React.Component 
  render() 
    return (
      <BrowserRouter >
         <Router history=history />
         <ReviewCollection />
          <Route path="/details" component=ReviewCard />
      </BrowserRouter>
    );
  


export default App;

但我仍然对现在应该如何在 ReviewCollection.js 文件中使用 browserHistory 感到困惑。这没有改变，仍在使用代码browserHistory.push('/details');

【问题讨论】：

你试过 BrowserRouter 吗？从'react-router'导入BrowserRouter；然后 ...

是的，我做到了，奇怪的是我仍然得到同样的错误

【参考方案1】：

最好使用react-router-dom 而不是react-router。因为react-router-dom 导出dom 感知组件最有趣的是browser.history。

查看更多信息 - react-router vs react-router-dom, when to use one or the other?

由于您使用的是browserHistory.push()，因此最好使用withRouter HOC 重定向到您想要的相关页面。

查看此以获取更多信息 - How to push to History in React Router v4?

根据 OP 的建议，我认为评论主页和特定评论的详细信息页面必须有 2 条不同的路径（一旦用户点击）。因此，使用 BrowserRouter，可以为两个页面创建路由。主页包含ReviewCollection，它应该呈现ReviewHeader 组件的数组。 在评论页面中，对于特定的评论，它应该呈现ReviewDetails，而不是应该保持分开的ReviewHeader，否则会产生您遇到的在两个不同的地方使用相同组件的问题。

正如我之前所说，要进行重定向，请使用 withRouter HOC 而不是 BrowserHistory。由于它是 HOC，因此您需要包装组件以使用提取的历史对象作为道具。

使用以下代码-sn-ps 作为支持材料来配置BrowserRouter 和withRouter HOC。

并检查此以获取有关 react-router 的更多信息：https://reactrouter.com/web/guides/quick-start

App.js

import React from "react";
import ReviewCollection from "./ReviewCollection";
import ReviewCardDetails from "./ReviewCardDetails";
import  BrowserRouter as Router, Route  from "react-router-dom";

class App extends React.Component 
  render() 
    return (
      <Router>
        <Route exact path="/" component=ReviewCollection />
        <Route exact path="/details" component=ReviewCardDetails />
      </Router>
    );
  


export default App;

在 App 模块中，我已将确切的标志作为Route 组件的标志，以使我们的自定义组件完全安装在给定路径上。否则ReviewCollection 组件即使在/details 路由中也会保持原样。

评论收藏

import React from "react";
import ReviewCardHeader from "./ReviewCardHeader";
import  reactLocalStorage  from "reactjs-localstorage";
import  withRouter  from "react-router-dom";

const reviews = [
  
    id: 1,
    place: "title 1",
    rating: 10,
    content: "content 1",
    author: "author 1",
    published_at: "published_at 1",
  ,
  
    id: 2,
    place: "title 2",
    rating: 12,
    content: "content 2",
    author: "author 2",
    published_at: "published_at 2",
  ,
];
class ReviewCollection extends React.Component 
  goToDetails = (review) => 
    reactLocalStorage.set("selectedReview", review);
    this.props.history.push( pathname: "/details", state:  review  );
  ;

  render() 
    return (
      <div className="card-collection">
        reviews
          .filter((review, idx) => idx < 24)
          .map((review) => (
            <div onClick=() => this.goToDetails(review)>
              <ReviewCardHeader key=review.id review=review />
            </div>
          ))
      </div>
    );
  


export default withRouter(ReviewCollection);

ReviewCardHeader

import React from "react";
import StarRatings from "react-star-ratings";

const ReviewCardHeader = ( review ) => 
  return (
    <div key=review.id className="card-deck">
      <div className="card">
        <div>
          <h4 className="card-title">review.place</h4>
          <StarRatings
            rating=review.rating
            starRatedColor="gold"
            starDimension="20px"
          />
          <div className="card-body">review.content</div>
          <div className="card-footer">
            review.author - review.published_at
          </div>
        </div>
      </div>
    </div>
  );
;

export default ReviewCardHeader;

评论卡详细信息

import React from "react";
import  useLocation  from "react-router-dom";
import StarRatings from "react-star-ratings";

const ReviewCardDetails = () => 
  const location = useLocation();
  const  review  = location?.state; // ? - optional chaining

  console.log("history location details: ", location);
  return (
    <div key=review.id className="card-deck">
      <div className="card">
        <div>
          <h4 className="card-title">review.place</h4>
          <StarRatings
            rating=review.rating
            starRatedColor="gold"
            starDimension="20px"
          />
          <div className="card-body">review.content</div>
          <div className="card-footer">
            review.author - review.published_at
          </div>
        </div>
      </div>
    </div>
  );
;

export default ReviewCardDetails;

主页视图

详情页面查看

希望这将有助于解决您的问题。并确保 header 和 details 组件具有不同的详细信息，因为 header 表示特定评论的摘要。

【讨论】：

您好，感谢您的帮助！如果您不介意在我的帖子上检查我的编辑，我仍然有点卡住。我阅读了您发送给我的文档，但仍然不太了解如何在此处使用 browserHistory.push()。谢谢你的帮助！

有个小问题，为什么ReviewCard 组件中有reviews.map()，它实际上需要显示与特定评论相关的视图，而不是用于所有评论。而且，由于 review 对象是从父组件传递到 ReviewCard 的，它会显示一个 lint 错误：'review' is already declared in the upper scope。因此，我认为它也应该需要更正。

对于 JSX 元素也使用 className 而不是 class

哦，哇，非常感谢您的帮助！刚看到你的代码，谢谢！！我真的很感激！

将其用作修改您的实施的支持材料，如果它完全适合您的问题的解决方案，请通过单击答案左角的勾选按钮来接受答案。