react router用法实例以及其中的一些坑

这几天因为项目需要,所以研究了一下react router这个东西,不得不说的是github是强大的,但是其中不免还是有些坑的,那么这些坑是在哪里呢,直接来看代码吧。。。。

首先既然我们用的是react,那么关于webpack的对于es6的那些配置我就不细说了,因此下面我们直接上es6的代码

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route,  Link,  browserHistory } from 'react-router'

首先我们导入react一些必要的工具包

然后我们先写一下首页的导航内容,这里为了区分被点击的链接,所以我加了一个ACTIVE的样式做区别

const ACTIVE = { color: 'red' }

class App extends Component {
    render() {
        return (
            <div>
                <h1>APP!</h1>
                <ul>
                    <li><Link      to="/"           activeStyle={ACTIVE}>/</Link></li>
                    <li><Link      to="/about"      activeStyle={ACTIVE}>/about</Link></li>
                    <li><Link      to="/inbox"      activeStyle={ACTIVE}>/inbox</Link></li>
                </ul>
                //这里是第一个坑点,在官方的github上并没有写这里的内容,
                //而这里的 this.props.children是为了替换<Child/>
                //这样router就会帮我们找到这个children
                {this.props.children}
            </div>
        )
    }
}

OK,别急,我们先把入口文件写完,上面我们把配置都做完了,接下来就是要引入,

let routes = (
    <Route path="/" component={App}>
        <Route path="/about" component={About}/>
        <Route path="/inbox" component={Inbox}/>
    </Route>
)
//这里是第二个坑点,看过官方github的朋友都知道,
//在Router这个标签里面会有一个属性 history={browserHistory}
//然而如果在这里加上了上面的这个属性之后,就会出现一个问题
//在选择url的时候会工作正常,但是当refresh这个页面的时候
//就会出现cannot get/...
render((<Router>{routes}</Router>), document.getElementById('app'))

好啦,入口文件我们已经完成了,那么接下来就要做组件内容了

这里我们为了更好区分组件与入口文件,所以将它们分在了不同的文件内,

那么这里我们就要先引入组件文件

import About from './compoment/about.jsx'
import Inbox from './compoment/inbox.jsx'

ok,那么组件中我们就要这么来写了,以about为例

import React, {Component} from 'react';

module.exports = class About extends Component {
    render () {
        return (
            <h2>
                About
            </h2>
        )
    }
};

好啦,react还是很强大的,而且很多用法也很骚,如果有不同意见的朋友我们可以好好交流,嘿嘿

你可能感兴趣的:(react,router)