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>

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

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。

如果你想动态导航意味着任何功能，请检查这个答案：

Programmatically navigating in React-Router v4

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

2 个答案: