반응형

react-router 36

구성 요소가 리듀렉스 저장소에 연결되지 않는 이유

구성 요소가 리듀렉스 저장소에 연결되지 않는 이유 일부 구성 요소(USERS)를 내 스토어에 연결하려고 한다.내가 너에게 각 단계를 보여줄게. 먼저 인덱스에 내 저장소를 만든다.js: // composeWithDevTools helps to follow state changes, remove in production const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const sagaMiddleware = createSagaMiddleware(); const store = createStore(reducers, composeEnhancers(applyMiddleware(sagaMiddleware))); //sa..

Programing 2022.04.09

페이지 렌더링 문제를 유발하는 대응j 라우팅

페이지 렌더링 문제를 유발하는 대응j 라우팅 App.js는 다음과 같다. function App() { return ( ); } 웹사이트에 접속하는 사람은 누구나 기본적으로 홈페이지를 먼저 보아야 한다. 다음과 같은 라우팅 정보가 포함된 탐색 메뉴가 있다. 로그인 메뉴 링크를 클릭하면 인증 페이지가 로드되지만 브라우저에서 아래로 스크롤하면 아래 홈페이지도 볼 수 있다.라우터에서 참조하는 페이지만 로드하려면 어떻게 해야 하는가? 해결책: 라우터에 다음 라우트 추가 다른 경로:Route다른 페이지 표시(구성 요소 속성:Route() 여기 데모와 리액션 처리 문서가 도움이 될 수 있다.행운을 빈다! react-reason-v4-reason 라우터 문서 대응 import { BrowserRouter as Rou..

Programing 2022.04.09

기본 반응:구성 요소 항상 실행

기본 반응:구성 요소 항상 실행 사실 나도 잘 모르겠어, 이 질문의 이름을 어떻게 지어야 할지! 서버에서 데이터를 가져와 로컬 데이터베이스와 비교하는 리액션 네이티브 JS 파일이 있어동시에 실행하려면 이게 필요한데 어떻게 하면 되지?앱이 시작될 때 실행되어야 하며 뷰 변경(다른 구성 요소에 대한 변경)이 앱을 파괴해서는 안 되며 실행 중이어야 한다. 해결책은?당신은 다음과 같은 것의 디자인 패턴을 설명하고 있다.싱글톤. 다음 절차를 따르십시오. let instance = null; class Singleton{ constructor() { if(!instance){ instance = this; } // to test whether we have singleton or not this.time = new..

Programing 2022.04.08

라우터 DOM의 라우터가 기록을 올바르게 수신하지 않음

라우터 DOM의 라우터가 기록을 올바르게 수신하지 않음 리액션 테스트 라이브러리의 기능을 래핑하는 유틸리티 기능을 만들려고 시도했었습니다.render사용하는 함수Router전체 반응 요소를 포장하십시오.코드는 이렇게 생겼어. import { ReactElement } from 'react'; import { render as renderRTL } from '@testing-library/react'; import { Router } from 'react-router-dom'; import { createMemoryHistory, History } from 'history'; export function render(ui: ReactElement) { const history = createMemoryHi..

Programing 2022.04.08

반응 라우터 activeClassName이 하위 경로에 대한 활성 클래스를 설정하지 않음

반응 라우터 activeClassName이 하위 경로에 대한 활성 클래스를 설정하지 않음 ABOUT BLOG DISCOVER CONTACT 내 네비게이션은 이렇게 생겼고, /blog로 이동하면 블로그가 활성화된다. 그러나 /blog/my-blog-post로 이동하면 활성 클래스가 사라지는데, 내 블로그 목록 항목에 /blog/my-blog-post가 활성 클래스를 설정하도록 하는 방법이 있는가? 나는 단지 나의 항로를 위와 같이 선언해야만 했고 그것은 효과가 있었다!이 링크는 다음과 같은 도움이 되었다.https://github.com/reactjs/react-router/issues/1684참조URL: https://stackoverflow.com/questions/37094748/react-route..

Programing 2022.04.07

react-router-dom v6으로 404 페이지를 작성하는 방법

react-router-dom v6으로 404 페이지를 작성하는 방법 루트를 정리하고 싶어서 리액션루터돔을 위해 v6베타로 업그레이드했는데 404 페이지가 깨졌다. export function AllRoutes(props) { return( ) } 따라서 추가해도 작동하지 않는 미발견 페이지를 제외한 모든 것이 예상대로 작동(홈페이지 포함)한다.path="/*"또는path="*" 쉬운 해결책은? // Use it in this way, and it should work: Ract Router v6는 정확한 경로와 일치하도록 정확한 속성을 사용하지 않는다.기본적으로 정확한 경로와 일치한다.값을 일치시키려면 경로 경로에 "*"를 사용하십시오. enter code here Route를 *의 경로로 렌더링하기만..

Programing 2022.04.07

대응: TypeError: 정의되지 않았거나 null을 개체로 변환할 수 없음

대응: TypeError: 정의되지 않았거나 null을 개체로 변환할 수 없음 리액트 응용 프로그램을 실행 중이다. 경로를 통해 페이지에 들어가면(클릭 버튼 또는 링크) 페이지는 정상 작동하지만 페이지를 다시 로드하면 페이지가 충돌한다.오류가 어디에 있는지 알 수 없고, 콘솔과 원본이 공백으로 표시되며, 서버 메시지 콘솔 메시지 입니다. server: Entrypoint index [big] = index.js index.1af9d975ff74be4d27d9.hot-update.js index.c93bf08301ec20c0dc85.js.map index.c93bf08301ec20c0dc85.js.map server: 533 modules server: backend debug read session { ..

Programing 2022.04.07

라우터 서버 측면 렌더링 오류 대응: 경고: propType 실패: 필수 prop 'history'가 'RoutingContext'에 지정되지 않음

라우터 서버 측면 렌더링 오류 대응: 경고: propType 실패: 필수 prop 'history'가 'RoutingContext'에 지정되지 않음 React/Hapi를 배우기 위해 간단한 장난감 앱을 설치하고 있는데 서버사이드 라우팅을 설정하기 전까지 모든 것이 잘 작동하고 있다.서버는 오류 없이 실행되며 "/" hello world를 적절하게 렌더링한다. 그러나 "/테스트"로 이동하면 다음과 같은 오류가 발생한다. Warning: Failed propType: Required prop `history` was not specified in `RoutingContext`. Warning: Failed propType: Required prop `location` was not specified in `..

Programing 2022.04.06

슈퍼 컴포넌트의 상태가 변경되었을 때 라우터 내부에 있는 컴포넌트의 재렌딩을 방지하는 방법?

슈퍼 컴포넌트의 상태가 변경되었을 때 라우터 내부에 있는 컴포넌트의 재렌딩을 방지하는 방법? 상위 구성요소의 상태를 업데이트하면, 라우터로 포장된 구성요소의 내부 하위 구성요소도 다시 렌더링되어 하위 구성요소의 상태가 초기값으로 재시작된다.아이에게 어떤 소품도 건네주지 않고 의존하지 않을 때도 말이다. 어떻게 하면 이것을 막을 수 있을까?여기서 데모를 찾을 수 있다.자식 구성 요소의 상태를 전환한 다음 부모 구성 요소의 상태를 변경하면 무슨 일이 벌어지는지 알 수 있다.네 문제에 대한 간단한 해결책이 있어! 인index.js, 이 행 변경: } /> 이 경우: } /> 의 차이점component그리고render익명의 기능이 있는 소품은 다음과 같다.component={() => }부모가 그럴 때 항상 재..

Programing 2022.04.06

리디렉션 후 손실되는 대응 컨텍스트

리디렉션 후 손실되는 대응 컨텍스트 컨텍스트 만들기 export default React.createContext({ user:null, login:()=>{} }) 컨텍스트 제어기 export default class ContextHandler extends Component{ state = { user: null, } logout = () => { this.setState({ user: null }) } login = user => { this.setState({ user: user }) }; render(){ return( {this.props.children} ) } } 앱.js class App extends Component{ render() { return ( ) } } export defa..

Programing 2022.04.05
반응형