注销后如何重定向到主页（在 jsx 中）

Question

<li>
    <a href="homepage.jsx">
      <i className="fa fa-sign-out pull-right"></i> 
      Log Out
    </a>
</li>

我在 homepage.jsx 中有主页组件，单击 logout 后我需要转到主页组件。

帮帮我。

Answer 1

我假设您正在使用 react-router v 2.x.x。您可以为此创建一个如下所示的组件。

您的路线还应包含您要重定向到的路线。

   <Route path="/" component={App}>
       <Route path="/homepage" component={Homepage}/>
   </Route>

class Logout extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props, context){
        super(props, context);
        this.state = {
            error:null
        };
    }

    logOut() {
        Api.logOut().then(
            () => {
                this.context.router.replace('/homepage');
            },
            () => {
                this.setState({
                    error:'Error occured while logging out. Please try again.'
                });
            }
        );
    }

    render(){

        return (
       <li>
          <a onClick={this.logOut} >
             <i className="fa fa-sign-out pull-right"></i> 
             Log Out
          </a>
       </li>
        )
    }
}

ReactDOM.render(<Logout/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

您正在使用 react-router，所以不要使用 a 和 href，而是使用 Link，这样写：

<li>
    <Link to="/">
        <i className="fa fa-sign-out pull-right"></i> 
        Log Out
    </Link>
</li>

由于主页组件是您的 indexroute，因此导航至 / 将 render 它。

如果您想在任何函数内动态导航，请检查此答案：

注销后如何重定向到主页（在 jsx 中）

How to redirect to home page(in jsx) after logout in react

html

redirect

jsx

reactjs

react-jsx