Reactjs의 react-router-dom 버전5에서의 리다이렉트 사용 방법
리액트로 웹 어플리케이션을 개발할 때 기본이 된 리액트-라우터 모듈(react-router-dom)을 사용하고 있습니다.POST 요청 후 리다이렉트 방법을 알고 싶습니다.저는 이 코드를 만들고 있지만, 요청 후 아무 일도 일어나지 않습니다.웹에서 확인하지만 모든 데이터는 이전 버전의 리액트라우터에 관한 것이며 마지막 업데이트에서는 그렇지 않습니다.
코드:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'
import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';
class SignUpPage extends React.Component {
constructor(props) {
super(props);
this.state = {
errors: {},
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};
this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}
changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;
this.setState({
client
});
}
async processForm(event) {
event.preventDefault();
const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };
axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
errors: {}
});
<Redirect to="/"/> // Here, nothings happens
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;
this.setState({
errors
});
});
}
render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
<SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
<Footer />
</div>
</div>
);
}
}
export default SignUpPage;
쓰셔야 돼요.setState합니다.<Redirect>면 insiderender()★★★★★★ 。
예.
class MyComponent extends React.Component {
state = {
redirect: false
}
handleSubmit () {
axios.post(/**/)
.then(() => this.setState({ redirect: true }));
}
render () {
const { redirect } = this.state;
if (redirect) {
return <Redirect to='/somewhere'/>;
}
return <RenderYourForm/>;
}
공식 문서에서도 예를 볼 수 있습니다.https://reacttraining.com/react-router/web/example/auth-workflow
. '우리'를 요.history오브젝트를 프로그래밍 방식으로 라우팅합니다.이것이 redux와의 통합 방식입니다.
하지만 이런 식으로 하는 데는 나름 이유가 있을 거예요.
여기 제목에 대한 응답으로 나온 작은 예시가 있습니다. 제 생각에는 공식 예시와 마찬가지로 복잡합니다.
es2015를 변환하는 방법과 서버가 리디렉션을 처리할 수 있도록 하는 방법을 알아야 합니다.여기 express에 대한 토막이 있습니다.이와 관련된 자세한 내용은 여기를 참조하십시오.
이것은 반드시 다른 모든 루트보다 낮게 설정해 주세요.
const app = express();
app.use(express.static('distApp'));
/**
* Enable routing with React.
*/
app.get('*', (req, res) => {
res.sendFile(path.resolve('distApp', 'index.html'));
});
이것은 .jsx 파일입니다.가장 긴 경로가 먼저 오고 보다 일반적인 경로를 얻을 수 있습니다.가장 일반적인 루트에 대해서는 정확한 Atribute를 사용합니다.
// Relative imports
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
// Absolute imports
import YourReactComp from './YourReactComp.jsx';
const root = document.getElementById('root');
const MainPage= () => (
<div>Main Page</div>
);
const EditPage= () => (
<div>Edit Page</div>
);
const NoMatch = () => (
<p>No Match</p>
);
const RoutedApp = () => (
<BrowserRouter >
<Switch>
<Route path="/items/:id" component={EditPage} />
<Route exact path="/items" component={MainPage} />
<Route path="/yourReactComp" component={YourReactComp} />
<Route exact path="/" render={() => (<Redirect to="/items" />)} />
<Route path="*" component={NoMatch} />
</Switch>
</BrowserRouter>
);
ReactDOM.render(<RoutedApp />, root);
리액트 라우터 v5에서는 useHistory() 후크 덕분에 history.push()를 사용하여 간단하게 리다이렉트 할 수 있게 되었습니다.
import { useHistory } from "react-router-dom"
function HomeButton() {
let history = useHistory()
function handleClick() {
history.push("/home")
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
)
}
원하는 기능 안에서만 불러주세요.
this.props.history.push('/main');
이런 거 해봐.
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Redirect } from 'react-router'
import SignUpForm from '../../register/components/SignUpForm';
import styles from './PagesStyles.css';
import axios from 'axios';
import Footer from '../../shared/components/Footer';
class SignUpPage extends React.Component {
constructor(props) {
super(props);
this.state = {
errors: {},
callbackResponse: null,
client: {
userclient: '',
clientname: '',
clientbusinessname: '',
password: '',
confirmPassword: ''
}
};
this.processForm = this.processForm.bind(this);
this.changeClient = this.changeClient.bind(this);
}
changeClient(event) {
const field = event.target.name;
const client = this.state.client;
client[field] = event.target.value;
this.setState({
client
});
}
processForm(event) {
event.preventDefault();
const userclient = this.state.client.userclient;
const clientname = this.state.client.clientname;
const clientbusinessname = this.state.client.clientbusinessname;
const password = this.state.client.password;
const confirmPassword = this.state.client.confirmPassword;
const formData = { userclient, clientname, clientbusinessname, password, confirmPassword };
axios.post('/signup', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
this.setState({
callbackResponse: {response.data},
});
}).catch((error) => {
const errors = error.response.data.errors ? error.response.data.errors : {};
errors.summary = error.response.data.message;
this.setState({
errors
});
});
}
const renderMe = ()=>{
return(
this.state.callbackResponse
? <SignUpForm
onSubmit={this.processForm}
onChange={this.changeClient}
errors={this.state.errors}
client={this.state.client}
/>
: <Redirect to="/"/>
)}
render() {
return (
<div className={styles.section}>
<div className={styles.container}>
<img src={require('./images/lisa_principal_bg.png')} className={styles.fullImageBackground} />
{renderMe()}
<Footer />
</div>
</div>
);
}
}
export default SignUpPage;
v6 업데이트,useNavigate훅 및 훅Link 표시
import { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
export default function Example(): JSX.Element {
const navigate = useNavigate();
useEffect(() => {
...
if(true) { // conditional redirection
navigate('/not-found', { replace: true });
}
}, []);
return (
<>
...
<Link to="/home"> Home </Link> // relative link navigation to /home
...
</>
);
}
useNavigate
Relative Link 컴포넌트
외에 '먹다'를 사용할 .withRouter에할 수 .history 및 속성<Route>의 »match the를 withRouter고차 컴포넌트 withRouter된 「갱신된」을 통과합니다.match,location , , , , 입니다.history렌더링할 때마다 포장된 컴포넌트에 소품을 장착합니다.
import React from "react"
import PropTypes from "prop-types"
import { withRouter } from "react-router"
// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { match, location, history } = this.props
return <div>You are now at {location.pathname}</div>
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
아니면 그냥:
import { withRouter } from 'react-router-dom'
const Button = withRouter(({ history }) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
))
문제는 기존 IIS 머신이 있다는 것입니다.그런 다음 정적 Respect 앱을 배포합니다.라우터를 사용하는 경우 표시되는 URL은 실제가 아닌 가상입니다.F5를 누르면 index.js가 아닌 IIS로 이동하며 404 파일을 찾을 수 없습니다.어떻게 해결했는지는 간단했다.리액트 앱에 공용 폴더가 있습니다.이 공용 폴더에 가상 라우팅과 동일한 폴더 이름을 만들었습니다.이 폴더에는 다음 코드를 가진 index.html이 있습니다.
<script>
{
sessionStorage.setItem("redirect", "/ansible/");
location.href = "/";
}
</script>
이제 이 세션에 대해 "루팅" 경로를 추가합니다.그리고 App.js에서는 이렇게 합니다(주의...데모를 위해 여기에 넣기에는 너무 많은 코드입니다.)
import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Redirect } from 'react-router';
import Ansible from "./Development/Ansible";
import Code from "./Development/Code";
import Wood from "./WoodWorking";
import "./App.css";
class App extends Component {
render() {
const redirect = sessionStorage.getItem("redirect");
if(redirect) {
sessionStorage.removeItem("redirect");
}
return (
<Router>
{redirect ?<Redirect to={redirect}/> : ""}
<div className="App">
...
<Link to="/">
<li>Home</li>
</Link>
<Link to="/dev">
<li>Development</li>
</Link>
<Link to="/wood">
<li>Wood Working</li>
</Link>
...
<Route
path="/"
exact
render={(props) => (
<Home {...props} />
)}
/>
<Route
path="/dev"
render={(props) => (
<Code {...props} />
)}
/>
<Route
path="/wood"
render={(props) => (
<Wood {...props} />
)}
/>
<Route
path="/ansible/"
exact
render={(props) => (
<Ansible {...props} checked={this.state.checked} />
)}
/>
...
</Router>
);
}
}
export default App;
실제 사용 : chizl.com
편집: localStorage에서 sessionStorage로 변경되었습니다.탭 또는 브라우저를 닫으면 sessionStorage가 사라지며 브라우저의 다른 탭에서 읽을 수 없습니다.
메모: 질문 제목만 답변합니다.
이전 버전
<Redirect from="/old-url" to="/new-url" />
최신 버전
<Route path="/old-url" element={<Navigate to="/new-url" />} />
에서는 react-router의 v6을 사용하여 할 수 .<Navigate/>가 붙다<Redirect/>★★★★★★ 。
저 같은 경우에는./Home route와 /chat route 사이의 서버 접속을 유지해야 했습니다.window.location을 클라이언트와 서버의 접속을 파괴하는 무언가로 재설정합니다.이 작업을 수행했습니다.
<div className="home-container">
{redirect && <Navigate to="/chat"/>}
<div className="home__title">
....
<div className="home__group-list" onClick={handleJoin}>
</div>
const [redirect, doRedirect] = useState(false)
handleJoin가 redirect정말이야.
이 목적을 위해 Hoc을 작성하고 메서드콜 리다이렉트를 쓸 수 있습니다.다음 코드는 다음과 같습니다.
import React, {useState} from 'react';
import {Redirect} from "react-router-dom";
const RedirectHoc = (WrappedComponent) => () => {
const [routName, setRoutName] = useState("");
const redirect = (to) => {
setRoutName(to);
};
if (routName) {
return <Redirect to={"/" + routName}/>
}
return (
<>
<WrappedComponent redirect={redirect}/>
</>
);
};
export default RedirectHoc;
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2"
경우는로하려면 , 「」를 인스톨 해 둡니다.」(「About」)을 인스톨 .prop-types수입하다 나는 ★★★★★★★★★★★★★★★★★★★★★★this.context.router.history.push('/about')그리고 그것은 항법된다.
내 암호는
import React, { Component } from 'react';
import '../assets/mystyle.css';
import { Redirect } from 'react-router';
import PropTypes from 'prop-types';
export default class Header extends Component {
viewAbout() {
this.context.router.history.push('/about')
}
render() {
return (
<header className="App-header">
<div className="myapp_menu">
<input type="button" value="Home" />
<input type="button" value="Services" />
<input type="button" value="Contact" />
<input type="button" value="About" onClick={() => { this.viewAbout() }} />
</div>
</header>
)
}
}
Header.contextTypes = {
router: PropTypes.object
};
또는 React 조건부 렌더링을 사용할 수 있습니다.
import { Redirect } from "react-router";
import React, { Component } from 'react';
class UserSignup extends Component {
constructor(props) {
super(props);
this.state = {
redirect: false
}
}
render() {
<React.Fragment>
{ this.state.redirect && <Redirect to="/signin" /> } // you will be redirected to signin route
}
</React.Fragment>
}
이 버전에서 react-router v-6.0.0-beta 또는 V6을 사용하는 경우 다음과 같이 탐색하도록 변경 사항 리디렉션
'react-router-dom'에서 {Navigate} 가져오기, // v6에서 이와 같이 수정, 'react-router-dom'에서 {Redirect } 가져오기, // v5에서 이와 같이 수정
'react-router-dom'에서 {Redirect} 가져오기; // v6에서 이와 같이 잘못됨 // 이렇게 하면 리액트 라우터 및 리액트 라우터 dom의 V6에서 오류가 발생합니다.
패키지에 같은 버전을 반드시 사용해 주세요.json { "react-router" : "^6.0.0-beta.0", // "react-router-dom" : "^6.0.0-beta.0", //이러한 }
위의 내용은 리액트라우터 버전6에서만 유효하게 동작합니다.
다른 컴포넌트로 이동하는 가장 간단한 방법은 다음과 같습니다(아이콘을 클릭하여 메일컴포넌트로 이동하는 예).
<MailIcon
onClick={ () => { this.props.history.push('/mails') } }
/>
, 을 합니다.this.props.history.push('/main');
import React, { Component, Fragment } from 'react'
class Example extends Component {
redirect() {
this.props.history.push('/main')
}
render() {
return (
<Fragment>
{this.redirect()}
</Fragment>
);
}
}
export default Example
리액트 라우터에 대응하는 리다이렉트를 배치하는 장소는 메서드 렌더에 있습니다만, 예를 들어 검증 후에 리다이렉트 하는 경우는, 신뢰성이 높은 낡은 window.location을 사용하는 것이 가장 좋습니다.href, 예:
evalSuccessResponse(data){
if(data.code===200){
window.location.href = urlOneSignHome;
}else{
//TODO Something
}
}
React Native를 프로그래밍할 때 앱 밖으로 나갈 필요가 없으며, 다른 앱을 여는 메커니즘도 완전히 다릅니다.
언급URL : https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-version-5-of-react-router-dom-of-reactjs
'programing' 카테고리의 다른 글
| JSON 프로토콜을 사용하여 버전 관리를 처리하는 가장 좋은 방법은 무엇입니까? (0) | 2023.02.25 |
|---|---|
| 키/값 쌍을 가져오기 위해 Javascript에서 JSON 응답 구문 분석 (0) | 2023.02.25 |
| 스크립트가 완전히 로드되어 실행되었을 때 jquery .getscript() 콜백 (0) | 2023.02.25 |
| 리액트 훅의 '유출 감소' 보풀 규칙 이해 (0) | 2023.02.25 |
| '동형 반응'이 무슨 뜻이죠? (0) | 2023.02.25 |