React路由器：TypeError：无法读取未定义的属性'getMONt位置'
我是一个新的整体反应和非常新的反应路由器。我正在构建一个应用程序，其中显示一个评论列表，当用户单击一张评论卡时，它们将被重定向到显示该卡详细信息的页面。我已经对大部分逻辑进行了编码，但我正在努力实现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组件，现在我已经开始实现report-router-dom而不是reportrouter：
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'）
共有1个答案
最好使用react-router-dom而不是react-router。最有趣的是导出dom感知组件browser.history。
检查此更多信息-反应路由器vs反应路由器-dom，何时使用一个或其他？
由于您使用的是browserHistory.push（），因此最好使用with routerHOC重定向到所需的相关页面。
查看此项以了解更多信息-如何在React路由器v4中推送到历史？
根据OP的建议，我认为有两种不同的路径用于评论主页和特定评论的详细信息页面（一旦用户点击）是必要的。因此，使用BrowserRouter，可以为两个页面创建路由。主页包含ReviewCollection，它应该呈现ReviewHeader组件的数组。在review页面中，对于特定的审阅，它应该呈现ReviewDetails，而不是应该分开的ReviewWheader，否则它将产生在您遇到的两个不同位置使用相同组件的问题。
正如我早些时候所说的，为了进行重定向，使用with路由器HOC而不是Browser历史。由于它是一个HOC，您需要包装组件以使用提取的历史对象作为道具。
使用以下代码段作为配置BrowserRouter和withRouterHOC的辅助材料。
并检查此以获得更多信息的反应路由器：https://reactrouter.com/web/guides/quick-start
一个pp.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模块中，我将exact作为一个标志指定给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);
复习卡片标题
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;
主页视图
详细信息页面视图
希望这将有助于解决您的问题。确保标题和细节组件有不同的细节，因为标题意味着特定评论的摘要。
-
我所遵循的教程使用的是React-Router 2.0.0，但在我的桌面上，我使用的是4.1.1。我试图搜索更改，但没有找到有效的解决方案。
-
问题内容： 我在使用React Router时遇到了一些麻烦（我使用的是version ^ 4.0.0）。 这是我的index.js App.js就是任何东西。我在这里发布基本的，因为这不是问题（我相信） 这就是我检查控制台日志时发生的情况 哦，这是package.json，以防万一 我已经在其他地方检查过，但是我没有找到解决方法。 非常感谢你们的耐心和帮助！！ 问题答案： 您做错了几件事。 首先
-
如果函数在组件中，那么一切都很好。如果我把它单独取出并导出到一个组件中，那么我会得到一个错误TypeError：不能读取未定义的属性（读取'reduce')
-
问题内容： 我决定学习React，并从正式教程开始。一切都好，直到我达到代码的这种状态： 当我尝试运行它时，在devtools中出现以下错误： TypeError：无法读取未定义的属性“ props” …并且调试器在标记的行处暂停（请参见代码）。当我将鼠标悬停在时，我将预览具有属性和所有内容的对象… 问题答案： 使用函数声明（或）代替箭头函数 一个相比函数表达式表达具有较短的语法和词汇结合此值（不
-
问题内容： 我试图在ajax回调从REST api接收数据后设置组件的setState。这是我的组件构造函数代码 然后，我有一个如下所示的方法。 现在，这是我执行getAJAX请求的getPosts函数。 我想设置状态，但出现以下错误。 不太清楚是什么原因造成的。如果有人指出我正确的方向，那将真的很有帮助。提前致谢。 问题答案： 还绑定回调函数，以便回调内部指向React Component的上下