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

I am having homepage component in homepage.jsx, after clicking on logout i need to go to homepage component.

Help me in this.

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
sai
  • 49
  • 1
  • 1
  • 5

2 Answers2

3

You are using react-router, so instead of using a and href use Link, write it like this:

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

Since Homepage component is your indexroute, so navigation to / will render it.

If you want to navigate dynamically means inside any function, then check this answer:

Programmatically navigating in React-Router v4

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
  • 1
    5
    6
    I am having the number i need to press value and make validation that first 2 numbers should only start with either 11 or 12     – sai Mar 29 '17 at 08:46
  • didn't get you, in this no input field is present where you are pressing the value ? can you post the complete code ? – Mayank Shukla Mar 29 '17 at 09:02
  • – sai Mar 29 '17 at 10:18
  • i need the number to be printed in - - - - - - - - - - - - - - - - - like this But i am able to print 1234567891234567 in this format and I need to do validation that the starting 2 numbers are 11, 12,13,14 – sai Mar 29 '17 at 10:19
  • ^\d{0,1}([1][1-9]+)|^\d{0,1}([2][1]+)|^\d{0,1}([3][1-6]+)|^\d{0,1}([5][1-3]+)|^\d{0,1}([6][1-4]+)|^\d{0,1}([7][1-6]+)|^\d{0,1}([8][1-2]+)|^\d{0,1}(([9][1]+)|([9][4]+)) For value validation i am having this how to implement in jsx in react – sai Mar 29 '17 at 11:18
  • can you show your code in `jsfiddle` or on `pastebin`? need to see your code. atleast paste some part. – Mayank Shukla Mar 29 '17 at 11:22
1

I am assuming you are using react-router v 2.x.x. You can create a component like below for this.

Your route should also contain the route to which you want to redirect.

   <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'/>
Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
WitVault
  • 23,445
  • 19
  • 103
  • 133