react-router> redirect가 작동하지 않습니다.

인터넷에서이 주제를 검색했으며 많은 답변을 찾았지만 작동하지 않습니다.react-router> redirect가 작동하지 않습니다.

코드에서 '/'경로에 반응 라우터를 사용하여 실제 리디렉션을 만들고 싶습니다. browserHistory.push ('/') 코드는 웹 브라우저에서 URL 만 변경하지만보기는 브라우저에 의해 새로 고쳐지지 않습니다. 요청한 콘텐츠를 보려면 수동으로 새로 고침해야합니다.

'window.location ='http://web.example.com:8080/myapp/ ''완벽하게 작동하지만 자바 스크립트 코드에서 전체 URI를 하드 코딩하지 않으려 고합니다.

실용적인 솔루션을 제공해 주시겠습니까?

나는 react 15.1.0과 react-router^2.4.1을 사용한다.

내 전체 예제 :

export default class Logout extends React.Component { 
    handleLogoutClick() { 
     console.info('Logging off...'); 
     auth.logout(this.doRedirect()); 
    }; 

    doRedirect() { 
     console.info('redirecting...'); 
     //window.location = 'http://web.example.com:8080/myapp/'; 
     browserHistory.push('/') 
    } 

    render() { 
     return (
      <div style={style.text}> 
       <h3>Are you sure that you want to log off?</h3> 
       <Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button> 
      </div> 
     ); 
    } 
}

출처

2016-07-23 zappee

대신 역사를 사용하는 router.push()를 사용할 수 있습니다

App.js

import appHistory from './AppHistory'; 
    ... 
    ReactDom.render(
    <Router history={appHistory} onUpdate={() => window.scrollTo(0, 0)}> 
    ... 
    </Router>, 
    document.getElementById('root') 
);

Logout.js는

import React from 'react'; 

import appHistory from '../../AppHistory'; 
import auth from '../auth/Auth'; 
import Button from "react-bootstrap/lib/Button"; 

export default class Logout extends React.Component { 

    handleLogoutClick() { 
     auth.logout(this.doRedirect()); 
    } 

    doRedirect() { 
     appHistory.push('/'); 
    } 

    render() { 
     return (
      <div style={style.text}> 
       <h3>Are you sure that you want to log off?</h3> 
       <Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button> 
      </div> 
     ); 
    } 
}

이 주제는 나에게 많은 도움이되었습니다. 답장을

import { withRouter } from 'react-router'; 

class Logout extends React.Component { 
    handleLogoutClick() { 
     console.info('Logging off...'); 
     auth.logout(this.doRedirect()); 
    }; 

    doRedirect() { 
     this.props.router.push('/') // use the router's push to redirect 
    } 

    render() { 
     return (
      <div style={style.text}> 
       <h3>Are you sure that you want to log off?</h3> 
       <Button bsStyle="primary" onClick={this.handleLogoutClick.bind(this)}>Yes</Button> 
      </div> 
     ); 
    } 
} 

export default withRouter(Logout); // wrap with the withRouter HoC to inject router to the props, instead of using context

출처

2016-07-23 12:56:09

고맙습니다 이렇게하려면, 당신은 직접 컨텍스트를 사용하는 것보다 더 나은 상황 또는 withRouter HoC를 사용할 수 있습니다. 그것은 매력처럼 작동합니다. 이 두 가지 솔루션간에 어떤 점이 다른지 알 수 없습니다. 아마도 더 빠르게 작동하고있을 것입니다. 나는 당신이 제안한 것을 사용할 것입니다. – zappee

환영합니다. Router.push는 history.push를 사용하는 라우터의 단지 방법 일뿐입니다. 아무것도 멋진 :) –

솔루션 :

AppHistory.js

import { createHashHistory } from 'history'; 
import { useRouterHistory } from 'react-router'; 

const appHistory = useRouterHistory(createHashHistory)({ 
    queryKey: false 
}); 

export default appHistory;

그런 다음 앱에 사방에서 appHistory를 사용할 수 있습니다. Programmatically navigate using react router

출처

2016-07-23 12:24:33 zappee

react-router> redirect가 작동하지 않습니다.

답변

관련 문제