React-Router傳參取值頁面跳轉

項目結構
image.png

-RouterMap頁面，所有的頁面都必須註冊路由

 import React from 'react'import { Router, Route, IndexRoute } from 'react-router'import App 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'// 如果是大型項目，router部分就需要做更加複雜的配置// 參見 https://github.com/reactjs/react-router/tree/master/examples/huge-appsclass RouterMap extends React.Component {    render() {        return (            <Router history={this.props.history}>                <Route path='/' component={App}>                    <IndexRoute component={Home}/>                    <Route path='/city' component={City}/>                    <Route path='/Login(/:router)' component={Login}/>                    <Route path='/User' component={User}/>                    <Route path='/search/:category(/:keyword)' component={Search}/>                    <Route path='/detail/:id' component={Detail}/>                    <Route path='*' component={NotFound}/>                </Route>            </Router>        )    }}export default RouterMap

路由跳轉方式 一 用Link跳轉

<Link to="/Login">        <i className="icon-user"></i></Link><Link to="/city">        <span>{this.props.cityName}</span>        <i className="icon-angle-down"></i></Link>

傳遞參數

<Link to={'/detail/' + data.id}>                    <div className="item-img-container float-left">                        <img src={data.img} alt={data.title}/>                    </div>                    <div className="item-content">                        <div className="item-title-container clear-fix">                            <h3 className="float-left">{data.title}</h3>                            <span className="float-right">{data.distance}</span>                        </div>                        <p className="item-sub-title">                            {data.subTitle}                        </p>                        <div className="item-price-container clear-fix">                            <span className="price float-left">￥{data.price}</span>                            <span className="mumber float-right">已售{data.mumber}</span>                        </div>                    </div></Link>

二js控制跳轉search頁面並傳遞參數

<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頁面接受參數

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頁面接受參數

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/Comment'class Detail extends React.Component {    constructor(props, context) {        super(props, context);        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);    }    render() {        // 擷取商戶ID        const id = this.props.params.id        return (            <div>                <Header title="商戶詳情" type="share"/>                <Info id={id}/>                <Buy id={id}/>                <Comment id={id}/>            </div>        )    }}export default Detail

header頁面接受傳遞的參數以及返回

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(props, 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>                <h1>{this.props.title}</h1>            </div>        )    }    clickHandle() {        const backRouter = this.props.backRouter        if (backRouter) {            hashHistory.push(backRouter)        } else {            window.history.back()        }    }}export default aa

路由返回參數

window.history.back()

跳轉到登陸頁面

// 檢查登入狀態    loginCheck() {        const id = this.props.id        const userinfo = this.props.userinfo        if (!userinfo.username) {            // 跳轉到登入頁面的時候，要傳入目標router，以便登入完了可以自己跳回來            hashHistory.push('/Login/' + encodeURIComponent('/detail/' + id))            return false        }        return true    }

login 頁面登陸跳轉到指定

// 處理登入之後的事情    loginHandle(username) {        // 儲存使用者名稱        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) {            // 跳轉到指定的頁面            hashHistory.push(router)        } else {            // 跳轉到使用者首頁            this.goUserPage()        }    }    goUserPage() {        hashHistory.push('/User')    }

user頁面

import React from 'react'import PureRenderMixin from 'react-addons-pure-render-mixin'import { connect } from 'react-redux'import { hashHistory } from 'react-router'import Header from '../../components/He