javascript - react 路由器 : TypeError: Cannot read property 'getCurrentLocation' of undefined

Question

我是 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:无法读取未定义的属性'getCurrentLocation'”有人可以帮我找出问题所在吗？谢谢

编辑#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');

Answer 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 应该保持分开，否则会产生在 2 个不同的中使用相同组件的问题你遇到过的地方。

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

使用以下代码片段作为配置 BrowserRouter 和 withRouter HOC 的支持 Material 。

并检查此以获取有关 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 组件提供了 exact 作为标志，以便让我们的自定义组件准确地安装在给定路径上。否则，即使在 /details 路径中，ReviewCollection 组件也将保持完整。

评论集合

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;

ReviewCardDetails

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;

主页 View

详细信息页面 View

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