使用反应从页面导航到另一个

Question

我有网站建在Angular.JS,Node.JS和Mongo。目前我正试图将前端从Angular.JS转换为React.JS。

这是链接到网站"Otbo5ly"（这是一个阿拉伯语词，意思是“为我做饭”）

我想从一个页面导航到另一位置上的一个按钮点击时，这里是我的代码：

app.jsx文件

class App extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div style = {{backgroundImage: 'url(/assets/header-bg.jpg)', 
      backgroundPosition: 'bottom', 
      paddingTop: '10px'}}> 
      <div> 
      <div className="container-fluid"> 
      <nav className="navbar navbar-inverse" style = {{ margin: '25px 50px', 
      backgroundColor: 'rgba(31, 31, 31, 0.7)', 
      borderColor: '#484848', 
      zIndex: '3', 
      position: 'absolute' 
     }}> 
     <div className="container"> 
     <div className="navbar-header"> 
     <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span className="sr-only">Toggle navigation</span> 
     <span className="icon-bar"></span> 
     <span className="icon-bar"></span> 
     <span clNameass="icon-bar"></span> 
     </button> 
     <a className="navbar-brand" href="#/" style = {{color: "#257204"}}>Otbo5ly 
     <small> beta</small></a> 
     </div> 
     <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul className="nav navbar-nav"> 
     <li><a href="#/users">My Profile</a></li> 
     <li><a href="#/orders">My Orders</a></li> 
     <li> <a href = "#/signin">Sign In</a></li> 
     <li><a href="<SignUp></SignUp>">Sign Up</a></li> 
     <li><a href="#/signout">Sign out</a></li> 
     </ul> 
     <ul className="nav navbar-nav navbar-right"> 
     <li><a href="http://www.rbk.org" target="_blank">RBK</a></li> 
     </ul> 
     </div> 
     </div> 
     </nav> 
     </div> 
     <div> 
     </div> 
     </div> 
     <MainPage></MainPage> 
     <Router history={hashHistory}> 
     <Route path='/signup' component={SignUp}>signup</Route> 
     <Route path='signin' component={SignIn}>signin</Route> 
     </Router> 
     </div> 
     )} 
    } 
    window.App = App; 

我想利用用户在登录页上或profile-button点击时profile页面，这里是profile.jsx文件：

var Profile = (props) => (
    <div className="row" style={{ 
    background: "url('assets/inside-bg.jpg')", 
    backgroundPosition: 'top', 
    minHeight: '500px', 
    zIndex: '2', 
    paddingTop: '100px'}}> 
    <div className="row" style={{paddingBottom: '50px', margin: '0px'}}> 
    <div className="col-md-10 col-md-offset-1 text-center"> 
    <div className="col-md-4 col-xs-12" style={{ color: '#fff', marginTop: '20px'}}> 
    <img src="/assets/chef.png" className="img-responsive thumbnail" style={{margin: 'auto'}} /> 
    <img src="/ImgUrl" className="img-responsive thumbnail" style={{margin: 'auto'}}/> 
    </div> 
    <div className="col-md-8 col-xs-12" style={{color: '#fff', marginTop: '20px'}}> 
    <h1 style={{fontWeight: 'bold', color: '#fff', textAlign: 'left', marginBottom: '40px'}}> 
    data FullName </h1> 
    <div className="col-md-6 col-xs-12"> 
    <i className="glyphicon glyphicon-phone" style="font-size: 3em;"></i> 
    <p style="line-height: 40px;font-size: 15pt;"> 
    data PhoneNumber 
    </p> 
    </div> 
    <div className="col-md-6 col-xs-12"> 
    <i className="glyphicon glyphicon-envelope" style={{fontSize: '3em'}}></i> 
    <p style={{lineHeight: '40px', fontSize: '15pt'}}> data Email </p> 
    </div> 
    </div> 
    <div className="col-xs-12" style={{marginTop: '50px'}}> 
    <span style={{padding: '20px', fontSize: '1.7em', color: '#fff'}}><b> data FullName </b> cooking for today is : <b> data todayCook Name </b>, just for 
    <b> data todayCook Price </b> JOD!</span> 
    <button className="btn btn-lg btn-primary">Order now</button> 
    </div> 
    </div> 
    </div> 
    </div> 
    <div className="row" style= {{marginTop: '40px'}}> 
    <div className="col-md-10 col-md-offset-1 col-xs-12"> 
    <div className="panel panel-default"> 
    <div className="panel-heading"><b> data user FullName </b> schedule</div> 
    <table className="table"> 
    <tbody> 
    <tr style={{fontWeight: 'bold'}}> 
    <td>Day</td> 
    <td> cook DayName </td> 
    </tr> 
    <tr> 
    <td style={{fontWeight: 'bold'}}>Cooking</td> 
    <td> cook CookeName </td> 
    </tr> 
    </tbody></table> 
    </div> 
    </div> 
    </div> 
    <div className="row"> 
    <div className="page-header text-center"> 
    <h1>User reviews <small> for data FullName </small></h1> 
    </div> 
    </div> 
    <div className="row"> 
    <div className="col-md-10 col-md-offset-1 col-xs-12"> 

    <div className="col-md-6 col-xs-12"> 
    <div className="panel panel-default"> 
    <div className="panel-body"> comment ComBody </div> 
    <div className="panel-footer"> comment InsertedUserFullName </div> 
    </div> 
    </div> 

    </div> 
    </div> 
    ) 

window.Profile = Profile; 

我已经尝试了很多方法，但我认为我错过了某些东西，可能是图书馆或语法，仍然不确定最佳导航方式。

Answer 1

假设您使用的是最新版本的React Router（4v）。尝试这样的事情。

import React,{Component} from 'react'; 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 

class App extends Component{ 

    render(){ 
     return(
     <Link to="/signin"><input value="profile"/></Link> 
      ); 
    } 

} 

export default App;