Project Structure
Image.png
-routermap page, all pages must be registered for routing
Import React from ' React ' import {Router, Route, indexroute} from ' React-router ' import apps from '. /containers ' Import Home from '. /containers/home ' Import city from '. /containers/city ' Import Login from '. /containers/login ' Import User from '. /containers/user ' Import Search from '. /containers/search ' Import Detail from '. /containers/detail ' Import NotFound from '. /containers/404 '//If it is a large project, the router section needs to be more complex to configure//See https://github.com/reactjs/react-router/tree/master/examples/ Huge-apps class Routermap extends React.component {render () {return (<router history={this. props.history}> <route path= '/' component={app}> <indexroute component={ho me}/> <route path= '/city ' component={city}/> <route path= '/login (/:rou ter) ' component={login}/> <route path= '/user ' component={user}/> <rout E path= '/search/:Category (/:keyword) ' component={search}/> <route path= '/detail/:id ' component={detail}/>
<route path= ' * ' component={notfound}/> </Route> </Router> )}} Export default Routermap
Route Jump ModeOne with link jump
<link to= "/login" >
<i classname= "Icon-user" ></i>
</Link>
<link to= "/city" >
<span>{this.props.cityName}</span>
<i classname= "Icon-angle-down" ></i>
</Link>
Passing parameters
<link to={'/detail/' + data.id}> <div classname= "Item-img-container float-left" > </div> <div c
Lassname= "Item-content" > <div classname= "Item-title-container clear-fix" >
Two JS control jump search page and pass parameters
<div classname= "Home-header-middle" >
<div classname= "Search-container" >
<i classname= " Icon-search "></i>
<searchinput value=" "Enterhandle={this.enterhandle.bind (This)}/>
</ Div>
</div>
Enterhandle (value) {
hashhistory.push ('/search/all/' + encodeuricomponent (value)
}
Search Page Accept Parameters
Import React from ' React '
import purerendermixin from ' react-addons-pure-render-mixin '
import searchheader From '. /.. /components/searchheader '
import searchlist from './subpage/list '
class Search extends React.component {
Constructor (props, context) {
Super (props, context);
This.shouldcomponentupdate = PureRenderMixin.shouldComponentUpdate.bind (this);
}
Render () {
const params = this.props.params
return (
<div>
<searchheader keyword={ params.keyword}/>
<searchlist Keyword={params.keyword} category={params.category}/>
</div >
)
}
}
export Default Search
Detail Page Accept Parameters
Import React from ' React ' import purerendermixin from ' react-addons-pure-render-mixin ' import Header from '. /.. /components/header ' Import Info from './subpage/info ' import Buy from './subpage/buy ' import Comment from './subpage/comme
NT ' class Detail extends React.component {constructor (props, context) {Super (props, context);
This.shouldcomponentupdate = PureRenderMixin.shouldComponentUpdate.bind (this);
} render () {//Get merchant id Const ID = this.props.params.id return (<div> The header page accepts parameters passed and returns
Import React from ' React ' import purerendermixin from ' react-addons-pure-render-mixin ' import {hashhistory} from ' react- Router ' import './style.less ' class Header extends React.component {constructor (props, context) {super (pro
PS, context);
This.shouldcomponentupdate = PureRenderMixin.shouldComponentUpdate.bind (this); } render () {return (<div id= "Common-header" > <span classname= "Back-icon
"Onclick={this.clickhandle.bind (This)}> <i classname=" Icon-chevron-left "></i>
</span>
Route return parameters
Window.history.back ()
Jump to landing page
Check the login status
logincheck () {
Const ID = this.props.id
const USERINFO = This.props.userinfo
if (! Userinfo.username) {
//jump to the login page, to pass in the target router, so that you can jump back to the end of the
Hashhistory.push ('/login/' + encodeURIComponent ('/detail/' + ID))
return False
}
return True
}
Login Page Login jump to the specified
Handling things after Login
Loginhandle (username) {
//save user name
Const ACTIONS = this.props.userInfoActions Let
userinfo = this.props.userinfo
userinfo.username = Username
actions.update (userinfo)
const PARAMS = This.props.params
Const ROUTER = params.router
if (router) {
//jump to specified page
Hashhistory.push (Router)
} else {
//jump to User home
this.gouserpage ()
}
}
gouserpage () {
Hashhistory.push ('/ User ')
}
User page
import React from ' React ' import purerendermixin from ' react-addons-pure-render-mixin ' import {connect} from ' react-red UX ' Import {hashhistory} from ' React-router ' import Header from '. /.. /components/he