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/Header'import UserInfo from '../../components/UserInfo'import OrderList from './subpage/OrderList'class User extends React.Component {    constructor(props, context) {        super(props, context);        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);    }    render() {        const userinfo = this.props.userinfo        return (            <div>                <Header title="用户主页" backRouter="/home"/>                <UserInfo username={userinfo.username} city={userinfo.cityName}/>                <OrderList username={userinfo.username}/>            </div>        )    }    componentDidMount() {        // 如果未登录，跳转到登录页面        if (!this.props.userinfo.username) {            hashHistory.push('/Login')        }    }}// -------------------redux react 绑定--------------------function mapStateToProps(state) {    return {        userinfo: state.userinfo    }}function mapDispatchToProps(dispatch) {    return {    }}export default connect(    mapStateToProps,    mapDispatchToProps)(User)