React-router parameter Value page jump

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