사용자가 반응을 클릭 한 후 완전히 새로운 페이지로 리디렉션하는 방법은 무엇입니까?
버키
일부 항목을 렌더링하는 부모 구성 요소와 부모 구성 요소에서 일부 소품을 얻는 자식 구성 요소가 있습니다. 그리고 사용자가 Parent에서 버튼을 클릭하면 완전히 새로운 페이지로 이동합니다.
부모 구성 요소
import React from "react";`enter code here`
import "./styles.css";
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom'
import ChildComponent from './ChildComponent'
export default function App() {
const someData = {
name : "Joh Doe"
}
return (
<div className="App">
<h1>This is parent Component</h1>
<Router>
<Link to='/secondpage'>Click me for Second Page</Link>
<Route
path='/secondpage'
render={(props) => (
<ChildComponent {...someData} isAuthed={true} />
)}
/>
</Router>
</div>
);
}
ChildComponent.js
import React from "react";
export default function ChildComponent(props) {
console.log("Data", props);
return <div>This is Second Page. It should open in new page. Also it should render incoming props</div>;
}
작업 데모
ARSEIF
나는 변경 코드입니다.
parent component
import React from "react";
import { Link } from "react-router-dom";
export default function ParentComponent(props) {
console.log("Data", props);
return (
<div className="App">
<h1>This is parent Component</h1>
<Link to="/secondpage">Click me for Second Page</Link>
</div>
);
}
child component
import React from "react";
export default function ChildComponent(props) {
console.log("Data", props);
return (
<div>
This is Second Page. It should open in new page. Also it should render
incoming props
</div>
);
}
app component
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ChildComponent from "./ChildComponent";
import ParentComponent from "./parentComponent";
export default function App() {
const someData = {
name: "Joh Doe"
};
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/secondpage">
<ChildComponent {...someData} isAuthed={true} />
</Route>
<Route exact path="/" component={ParentComponent} />
</Switch>
</Router>
</div>
);
}
작업 데모
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
자바 스크립트 : play.png를 클릭 한 후 다른 페이지로 리디렉션하는 방법은 무엇입니까?
- 2
편집 버튼을 클릭 한 이전 페이지로 사용자를 리디렉션하는 방법
- 3
페이지의 버튼을 클릭 한 후에도 Selenium은 여전히 이전 페이지 상태를 사용합니다. 브라우저 / HTML 코드 상태로 업데이트하는 방법은 무엇입니까?
- 4
사용자가 다음 페이지 매김 페이지 또는 페이지 새로 고침을 클릭 한 후 확인란 상태 및 게시 값을 페이지에 저장하는 방법은 무엇입니까?
- 5
응용 프로그램의 하위 디렉토리에 대한 http 액세스를 완전히 차단하는 가장 쉬운 방법은 무엇입니까?
- 6
Symfony-로그인 후 마지막으로 방문한 페이지로 사용자를 리디렉션하는 방법은 무엇입니까?
- 7
페이지가 완전히로드 된 후 이미지를 표시하는 방법은 무엇입니까?
- 8
Node.js 및 Passport를 사용하여 인증 한 후 ID로 사용자를 홈 페이지로 리디렉션하는 방법은 무엇입니까?
- 9
Django에 등록한 후 처음 로그인하는 경우 사용자를 다른 페이지로 리디렉션하는 방법은 무엇입니까?
- 10
리디렉션을 사용하여 양식에서 저장 한 후 ID로 개체를 전달하는 방법은 무엇입니까?
- 11
제출 버튼을 클릭하면 홈페이지로 리디렉션하는 방법은 무엇입니까?
- 12
Facebook에 로그인 한 후 사용자를 리디렉션하는 방법은 무엇입니까?
- 13
사용자가 해당 페이지에서 왔을 때만 양식 제출 후 CodeIgniter에서 URL을 이전 페이지로 리디렉션하는 방법은 무엇입니까?
- 14
제출 버튼을 클릭하고 개인 웹 사이트에 삽입 된 후 typeform 웹 페이지를 리디렉션하는 방법은 무엇입니까?
- 15
인증 후 사용자를 동일한 페이지로 다시 리디렉션하는 방법은 무엇입니까?
- 16
NSIS : 다음 / 뒤로 버튼을 클릭 한 후 이전 대화 상자의 입력 값을 유지하는 방법은 무엇입니까?
- 17
사용자가 이미지를 클릭하면 몇 초 후에 상위 페이지를 리디렉션하는 방법은 무엇입니까?
- 18
이전 버튼을 클릭 한 후 빈 div가 나타나지 않게하는 방법은 무엇입니까?
- 19
이전 버튼을 클릭 한 후 빈 div가 나타나지 않게하는 방법은 무엇입니까?
- 20
사용자가 AlertDialog 확인 버튼을 클릭 한 후 다음 활동으로 이동하는 방법은 무엇입니까?
- 21
iron-router : 경로를로드 한 후 새로 고침을 누를 때와 같이 경로를 완전히로드하는 방법은 무엇입니까?
- 22
CSS로 클릭 한 후 라벨을 올리는 방법은 무엇입니까?
- 23
자바 스크립트에서 버튼을 클릭하면 한 HTML 페이지에서 다른 페이지로 리디렉션하는 방법은 무엇입니까?
- 24
선택한 사용자의 페이지 VueJS로 리디렉션하는 방법은 무엇입니까?
- 25
선택한 사용자의 페이지 VueJS로 리디렉션하는 방법은 무엇입니까?
- 26
Laravel에 성공적으로 등록한 후 이전 페이지로 리디렉션하는 방법은 무엇입니까?
- 27
사용자가 jsp 페이지를 방문한 직후 pdf 파일을 다운로드하도록하는 방법은 무엇입니까?
- 28
Laravel에 데이터를 저장 한 후 이전 페이지로 다시 리디렉션하는 방법은 무엇입니까?
- 29
QR 스캔 후 나타나는 일반 텍스트를 클릭 가능하게 만들고 사용자를 브라우저로 리디렉션하는 방법은 무엇입니까?
몇 마디 만하겠습니다