반응 경로가 반환될 때 새로 고쳐지지 않으면 어떻게 해야 합니까?

반응 경로 반환 시 새로 고침되지 않는 솔루션: 1. 경로 식별을 높이기 위해 라우팅 구성 요소의 상단 요소에 키를 추가합니다. 2. 경로의 정확한 위치를 찾기 위해 키를 경로의 상단 요소에 바인딩합니다. 3. 구성요소를 withRouter와 연결하십시오.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응 경로가 반환될 때 새로 고쳐지지 않으면 어떻게 해야 하나요?

React 경로 변경 후 페이지가 새로 고쳐지지 않는 문제에 대한 해결책

최근 React를 배우는 과정에서 경로 점프 후 페이지가 새로 고쳐지지 않는 문제에 직면했습니다. 자세한 해결 방법을 소개하겠습니다. 친구 여러분, 편집자와 함께 알아보세요

Problem

이 문제에는 여러 가지 이유가 있는 것 같습니다. 제 문제는 라우터 버전 5.0에서 매개 변수가 있는 URL을 새로 고칠 수 없다는 것입니다. withRouter 관련 구성 요소를 사용하여 페이지로 이동합니다.

아래와 같이

Routing code

Solution

경로 식별성을 높이기 위해 라우팅 구성 요소의 최상위 요소에 키를 추가합니다. 일반적인 점프는 경로를 기준으로 식별되기 때문입니다. 그러나 경로가 매개변수를 사용하면 경로를 정확하게 식별할 수 없습니다. 그러나 페이지로 이동할 때 각 주소는 로컬션 개체에 키를 추가합니다. 다음과 같이 인쇄하세요

// 组件挂载
 componentDidMount() {
   console.log(this.props.location);
 }

이 키를 경로의 최상위 요소에 바인딩하여 경로를 정확히 찾아낼 수 있습니다

render() {
   return (
     {/*就是这个key*/}
     <div key={this.props.location.key}>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route exact path="/products/:id" component={Products} />
           <Route exact path="/about" component={About} />
           <Route exact path="/solution" component={Solution} />
           <Route
             exact
             path="/solutionDetails/:id"
             component={SolutionDetails}
           />
           <Route exact path="/download" component={Download} />
           <Route path="/about" component={Download} />
           <Route exact path="/details/:id" component={Details} />
           <Route path="/contact" component={Contact} />
           <Route component={ErrorPage} />
         </Switch>
     </div>
   );
 }

그러나 this.props는 {} 빈 개체

라는 것을 알 수 있습니다. 구성 요소를 연결하고 연결하기 위해 withRouter를 사용할 수 없습니다. app.js는 연결할 수 없으며, router는 app.js

import React, { Component } from "react";
import {withRouter } from "react-router";
 
class routers extends Component {
 /**
  * 生命周期函数
  */
 // 组件挂载
 componentDidMount() {
   console.log(this.props.location);
 }
 render() {
   return (
     <div key={this.props.location.key}>
     </div>
   );
 }
}
export default withRouter(routers);

의 라우팅 구성 요소 또는 하위 구성 요소에만 연결할 수 있습니다. 권장 학습: "react 비디오 튜토리얼"

위 내용은 반응 경로가 반환될 때 새로 고쳐지지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!