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

25 浏览
0 Comments

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

我对React整体还不熟悉，对React Router更是新手。我正在构建一个应用程序，在该应用程序中显示一系列评论，并且当用户点击评论卡片时，会被重定向到显示此卡片详情的页面。我已经编写了大部分逻辑，但是在实现React Router方面遇到了困难。以下是我目前的组件。

App.js:

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 (
      
        
        
      
    );
  }
}
export default App;

ReviewCollection.js:

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 (
      

        {reviews
          .filter((review, idx) => idx < 24)
          .map((review) => (
            
 this.goToDetails(review)}>
              
            

          ))}
      

    );
  }
}
export default ReviewCollection;

ReviewCard.js:

import React from 'react';
import { reviews } from '../data';
import StarRatings from 'react-star-ratings';
import './Review.css';
const ReviewCard = ({ review }) => {
  return (
    

      {reviews.map((review) => (
        

          
{review.place}

          
          {review.content}
          {review.author} - {review.published_at}
        

      ))}
    

  );
};
export default ReviewCard;

我对我的路由是否朝着正确的方向发展不太有信心，在浏览器中，我遇到了这个错误："TypeError: Cannot read property 'getCurrentLocation' of undefined"。请问有人可以帮我找出问题所在吗？谢谢。

编辑 #1:

谢谢大家的建议。现在我已经开始使用react-router-dom而不是react router来实现，这是我的App.js组件现在的样子：

import React from 'react';
import ReviewCollection from './components/ReviewCollection';
import ReviewCard from './components/ReviewCard';
import { BrowserRouter, Route } from 'react-router-dom';
import history from './history';
class App extends React.Component {
  render() {
    return (
      
        
        
      
    );
  }
}
export default App;

但是我仍然不清楚我应该如何在ReviewCollection.js文件中使用browserHistory。这一点没有改变，仍然使用代码`browserHistory.push('/details');`

0

1 答案

0 Comments

在这个问题中，出现了一个TypeError: Cannot read property 'getCurrentLocation' of undefined的错误。这个错误的原因是在代码中使用了react-router而不是react-router-dom。

解决这个问题的方法是使用react-router-dom而不是react-router。react-router-dom是一个更加完善的版本，它导出了与DOM相关的组件，尤其是browser.history。可以参考以下链接获取更多信息：[react-router vs react-router-dom, when to use one or the other?](https://stackoverflow.com/questions/42684809)

另外，在使用browserHistory.push()时，最好使用withRouter HOC来进行页面重定向。可以参考以下链接获取更多信息：[How to push to History in React Router v4?](https://stackoverflow.com/questions/42701129)

根据OP的建议，我认为在评论页面和评论详情页面应该有两个不同的路径（一旦用户点击）。因此，使用BrowserRouter，可以为这两个页面创建路由。主页包含ReviewCollection，它应该渲染一组ReviewHeader组件。

在评论页面中，对于每个评论，它应该渲染ReviewDetails而不是ReviewHeader，这两个组件应该保持分离，否则会在两个不同的位置使用同一个组件，就像你遇到的问题一样。

如之前所说，为了进行重定向，请使用withRouter HOC而不是BrowserHistory。由于它是一个HOC，你需要将组件包装起来以使用作为prop提取的history对象。

在配置BrowserRouter和withRouter HOC方面，可以使用以下代码片段作为参考材料。

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 (
      
        
        
      
    );
  }
}
export default App;

在App模块中，我在Route组件中使用了exact标志，以确保我们的自定义组件仅在给定路径上挂载。否则，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 (
      

        {reviews
          .filter((review, idx) => idx < 24)
          .map((review) => (
            
 this.goToDetails(review)}>
              
            

          ))}
      

    );
  }
}
export default withRouter(ReviewCollection);


import React from "react";
import StarRatings from "react-star-ratings";
const ReviewCardHeader = ({ review }) => {
  return (
    

      

        

          
{review.place}

          
          
{review.content}

          

            {review.author} - {review.published_at}
          

        

      

    

  );
};
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
  
  return (
    

      

        

          
{review.place}

          
          
{review.content}

          

            {review.author} - {review.published_at}
          

        

      

    

  );
};
export default ReviewCardDetails;

希望这些对解决你的问题有所帮助。请确保在评论页面和评论详情页面中有不同的内容，因为评论页面应该显示特定评论的视图摘要。

如果这个解决方案完全适合你的问题，请点击答案左上角的打勾按钮接受答案。

0