【系列化】reactJS项目构建4--router基础
发布在reactJS2017年11月17日view:261
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

安装react-router

npm install react-router --save 详细可查看官网文档

创建页面

创建以下页面

  • ./app/containers/App.jsx 所有代码的容器
  • ./app/containers/Home 主页
  • ./app/containers/List 列表页
  • ./app/containers/Detail 详情页
  • ./app/containers/NotFound 404页面

值得注意的是 App.jsx 中的代码目前如下,而且放在这里有点多余,但是在正式的项目开发中,这个文件很有用,而且这个文件和 react-router 也将会结合的很好。

export default class App extends React.Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

配置router

创建 ./app/router/routeMap.jsx 文件,主要代码如下

import React from 'react' 
import { Router, Route, IndexRoute } from 'react-router'

import App from '../containers/App'
import Home from '../containers/Home'
import List from '../containers/List'
import Detail from '../containers/Detail'
import NotFound from '../containers/NotFound'

export default class RouteMap extends React.Component {
    updateHandle() {
        console.log('每次router变化之后都会触发')
    }
    render() {
        return (
             <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}>
                <Route path='/' component={App}>
                    <IndexRoute component={Home}/>
                    <Route path='list' component={List}/>
                    <Route path='detail/:id' component={Detail}/>
                    <Route path="*" component={NotFound}/>
                </Route>
            </Router>
        )
    }
}

注意,代码中 path='detail/:id',最后一个标记表示参数,例如 /detail/123 这个 123 就是参数,具体的使用在后面解释。

还要注意,Router标签 是可以嵌套的,上面的代码中只嵌套了一层,在后面的项目开发中,可能会嵌套层次多一些,不过都是一个道理。

使用router

./app/index.jsx 中的代码如下,这样就使用了刚才我们定义的 <routeMap> 组件

import React from 'react'
import { render } from 'react-dom'
import { hashHistory } from 'react-router'

import RouteMap from './router/routeMap'

// 通用样式
import './static/css/common.less'

render(
    <RouteMap history={hashHistory}/>,
    document.getElementById('root')
)

注意这里的 hashHistory,规定用 url 中的 hash 来表示 router 例如 localhost:8080/#/list 。与之对应的还有一个 browserHistory 也可用,它就不使用 hash ,直接可以这样 localhost:8080/list 表示。但是后者需要服务器端支持,我们这里用前者。两者在前端开发中,使用起来都是一样的,只是表示形式不一样。

到此为止就可以 npm start 运行看效果啦~~

页面跳转

从给一个页面跳转到另一个页面,有两种方法。第一种是 <Link> 跳转,例如在 Home 页面中的代码。(其实这个<Link>渲染完了就是html中的<a>

import React from 'react'
import { Link } from 'react-router'

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <p>Home</p>
                <Link to="/list">to list</Link>
            </div>
        )
    }
}

另一个方法是使用 js 跳转,例如在 List 页面中

import React from 'react'
import { hashHistory } from 'react-router'

export default class List extends React.Component {
    render() {
        const arr = [1, 2, 3]
        return (
            <ul>
                {arr.map((item, index) => {
                    return <li key={index} onClick={this.clickHandler.bind(this, item)}>js jump to {item}</li>
                })}
            </ul>
        )
    }
    clickHandler(value) {
        hashHistory.push('/detail/' + value)
    }
}

获取参数

Detail 页面需要获取 url 中的 id 参数,否则配置这个参数就无用了。可以使用 this.props.params.id 获取,代码如下:

import React from 'react'

export default class Detail extends React.Component {
    render() {
        return (
            <p>Detail,url参数:{this.props.params.id}</p>
        )
    }
}
评论
发表评论
22天前

web学习交流请与我联系

WRITTEN BY
娜娜娜娜
本人已懒到爆……
TA的新浪微博
PUBLISHED IN
reactJS

我竟然还会这个~

我的收藏