使用React

Question

我的网站建立在Angular.JS，Node.JS和Mongo之上。目前，我正在尝试将前端从Angular.JS转换为React.JS。

这是指向"Otbo5ly"网站的链接（这是一个阿拉伯语，意思是＆＃34;为我做饭＆＃34;）

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

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时将用户带到登录页面或profile-button页面，这里是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）。尝试这样的事情。

{{1}}