title: Navigating from page to another using React
body: <p>I have website built on <code>Angular.JS</code>, <code>Node.JS</code> and <code>Mongo</code>. Currently I am trying to make the front-end from <code>Angular.JS</code> into <code>React.JS</code>.  </p>
  
  <p>This is the link to the website <a href="https://otbo5ly.herokuapp.com/#/" rel="nofollow noreferrer">"Otbo5ly"</a> (It is an Arabic word that means "cook for me")  </p>
  
  <p>I want to navigate from a page to another when clicking on a button, here is my code:  </p>
  
  <p><code>app.jsx</code> file</p>
  
  <pre><code>class App extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;div style = {{backgroundImage: 'url(/assets/header-bg.jpg)',
              backgroundPosition: 'bottom',
              paddingTop: '10px'}}&gt;
              &lt;div&gt;
              &lt;div className="container-fluid"&gt;
              &lt;nav className="navbar navbar-inverse" style = {{ margin: '25px 50px',
              backgroundColor: 'rgba(31, 31, 31, 0.7)',
              borderColor: '#484848',
              zIndex: '3',
              position: 'absolute'
          }}&gt;
          &lt;div className="container"&gt;
          &lt;div className="navbar-header"&gt;
          &lt;button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span className="icon-bar"&gt;&lt;/span&gt;
          &lt;span className="icon-bar"&gt;&lt;/span&gt;
          &lt;span clNameass="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a className="navbar-brand" href="#/" style = {{color: "#257204"}}&gt;Otbo5ly
          &lt;small&gt; beta&lt;/small&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul className="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#/users"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#/orders"&gt;My Orders&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href = "#/signin"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="&lt;SignUp&gt;&lt;/SignUp&gt;"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#/signout"&gt;Sign out&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul className="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="http://www.rbk.org" target="_blank"&gt;RBK&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
          &lt;div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;MainPage&gt;&lt;/MainPage&gt;
          &lt;Router history={hashHistory}&gt;
          &lt;Route path='/signup' component={SignUp}&gt;signup&lt;/Route&gt;
          &lt;Route path='signin' component={SignIn}&gt;signin&lt;/Route&gt;
          &lt;/Router&gt;
          &lt;/div&gt;
          )}
      }
      window.App = App;
  </code></pre>
  
  <p>I want to take the user to the sign in page or the <code>profile</code> page when clicking on the <code>profile-button</code>, here is the <code>profile.jsx</code> file:  </p>
  
  <pre><code>var Profile = (props) =&gt; (
    &lt;div className="row" style={{
      background: "url('assets/inside-bg.jpg')",
      backgroundPosition: 'top',
      minHeight: '500px',
      zIndex: '2',
      paddingTop: '100px'}}&gt;
      &lt;div className="row" style={{paddingBottom: '50px', margin: '0px'}}&gt;
      &lt;div className="col-md-10 col-md-offset-1 text-center"&gt;
      &lt;div className="col-md-4 col-xs-12" style={{ color: '#fff', marginTop: '20px'}}&gt;
      &lt;img src="/assets/chef.png" className="img-responsive thumbnail" style={{margin: 'auto'}} /&gt;
      &lt;img src="/ImgUrl" className="img-responsive thumbnail" style={{margin: 'auto'}}/&gt;
      &lt;/div&gt;
      &lt;div className="col-md-8 col-xs-12" style={{color: '#fff', marginTop: '20px'}}&gt;
      &lt;h1 style={{fontWeight: 'bold', color: '#fff', textAlign: 'left', marginBottom: '40px'}}&gt;
      data FullName &lt;/h1&gt;
      &lt;div className="col-md-6 col-xs-12"&gt;
      &lt;i className="glyphicon glyphicon-phone" style="font-size: 3em;"&gt;&lt;/i&gt;
      &lt;p style="line-height: 40px;font-size: 15pt;"&gt;
      data PhoneNumber 
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;div className="col-md-6 col-xs-12"&gt;
      &lt;i className="glyphicon glyphicon-envelope" style={{fontSize: '3em'}}&gt;&lt;/i&gt;
      &lt;p style={{lineHeight: '40px', fontSize: '15pt'}}&gt; data Email &lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="col-xs-12" style={{marginTop: '50px'}}&gt;  
      &lt;span style={{padding: '20px', fontSize: '1.7em', color: '#fff'}}&gt;&lt;b&gt; data FullName &lt;/b&gt; cooking for today is : &lt;b&gt; data todayCook Name &lt;/b&gt;, just for 
      &lt;b&gt; data todayCook Price &lt;/b&gt; JOD!&lt;/span&gt;
      &lt;button className="btn btn-lg btn-primary"&gt;Order now&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row" style= {{marginTop: '40px'}}&gt;
      &lt;div className="col-md-10 col-md-offset-1 col-xs-12"&gt;
      &lt;div className="panel panel-default"&gt;
      &lt;div className="panel-heading"&gt;&lt;b&gt; data user FullName &lt;/b&gt; schedule&lt;/div&gt;
      &lt;table className="table"&gt;
      &lt;tbody&gt;
      &lt;tr style={{fontWeight: 'bold'}}&gt;
      &lt;td&gt;Day&lt;/td&gt;
      &lt;td&gt; cook DayName &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td style={{fontWeight: 'bold'}}&gt;Cooking&lt;/td&gt;
      &lt;td&gt; cook CookeName &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;&lt;/table&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row"&gt;
      &lt;div className="page-header text-center"&gt;
      &lt;h1&gt;User reviews &lt;small&gt; for data FullName &lt;/small&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="row"&gt;
      &lt;div className="col-md-10 col-md-offset-1 col-xs-12"&gt;
  
      &lt;div className="col-md-6 col-xs-12"&gt;
      &lt;div className="panel panel-default"&gt;
      &lt;div className="panel-body"&gt; comment ComBody &lt;/div&gt;
      &lt;div className="panel-footer"&gt; comment InsertedUserFullName &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
      )
  
  window.Profile = Profile;  
  </code></pre>
  
  <p>I have tried many ways but I think I am missing something, maybe a library or the syntax, still not sure of the best way to navigate.</p>