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;
私は多くの方法を試しましたが、私は何か、多分ライブラリや構文が不足していると思っていますが、まだナビゲートする最良の方法は不明です。
あなたはhttps://www.sigient.com/blog/movie-listings-application-with-react-router-v-4 – abdoutelb