React Router 黑笔记？

我横竖睡不着，字里行间看出2个字。。。。（缺钱，不缺钱谁半夜三更写这玩意。这。。。。fork or star 吧）

react-router.gif

首先，在该项目开始之前，还请大家能够先下载一个项目脚手架。本教程基于该脚手架进行开发

yo react-webpack _Image.png

先看文件大致架构

config_Image.png

渲染 Route （index.js 启动的component）

//index.js
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/Main';
import About from './components/about'
import Product from './components/Product'
import About_detail from './components/About_detail'
import About_default from './components/About_default'
import { Router , Route , browserHistory , IndexRoute} from 'react-router';

let app = (<div>
  <Router history={browserHistory}>

<Route path='/' component={App}></Route>

<Route path='/about' component={About}>
  <IndexRoute component={About_default}></IndexRoute>
  <Route path='/about/:eeee' component={About_detail} />
</Route>

<Route path='/product' component={Product}></Route>
</Router>

</div>)
// Render the main component into the dom
ReactDOM.render(app, document.getElementById('app'));

使用 Link 进行跳转组件

require('normalize.css/normalize.css');
require('styles/App.css');

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


class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        <div><Link to="/" activeStyle={{color: 'red'}} >首页    </Link></div>
        <div><Link to="/about" activeStyle={{color: 'red'}}>关于我们</Link></div>
        <div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒体</Link></div>
        <div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >产品服务</Link></div>
  </div>
);
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

从 Link 到 NavLink (可选，加次封装而已)

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

class NavLink extends Component {

  render () {
    return <Link {...this.props} activeStyle={{color: 'red'}} />
  }
}

export default NavLink

使用的时候
//onlyActiveOnIndex 只有是当前路由才显示
<li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li>

onlyActiveOnIndex 只有是当前路由才显示 一个路由的判断。

URL 参数的传递 -- 传递query的方法

• Link 的写法，Link 代表A标签

  <div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >产品服务</Link></div>
  

• 获取query的值

  <li><NavLink to="/product?name=wwwwww"  onlyActiveOnIndex={true} >name=wwwwww</NavLink></li>
  
  <h4>
    {this.props.location.query.name}
  </h4>
  

URL 参数的传递 -- 传递params的方法

• router 的写法
  <Route path='/about/:eeee' component={About_detail} />

• Link 的写法，Link 代表A标签
  <div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒体</Link></div>

• 获取params的值

  <h1>About</h1>
  <h1>{this.props.params.eeee}</h1>
  

嵌套 Route

<Router history={browserHistory}>

<Route path='/' component={App}></Route>

<Route path='/about' component={About}>
  <IndexRoute component={About_default}></IndexRoute>
  <Route path='/about/:eeee' component={About_detail} />
</Route>
<Route path='/product' component={Product}></Route>
</Router>

嵌套 Route 需要注意。在进入子路由的时候，父路由也会执行。看下图

Paste_Image.png

点击的路由是自媒体，其链接是/about/test , 然而/about 也红了。

使用 browserHistory

现代浏览器运行 JS 操作 URL 而不产生 HTTP 请求，
browserHistory和hashHistory不一样，使用browserHistory的时候，浏览器中导航栏的URL就不会出现hash键值对。实际项目中也一般用browserHistory.

<Router history={browserHistory}>

activeStyle,activeClassName

当前路由被点击处于触发显示状态的时候，这个简单，没什么说的

<Link activeClassName="active" to="/">首页</Link>

<div><Link to="/" activeStyle={{color: 'red'}} >首页</Link></div>

Redirect重定向 （感觉可以来做404，没测试）

<Redirect from="*" to="/404" />

文章稿纸的地址详见github
https://github.com/976500133/react-router-demo

其他的一些特性暂时不说了，使用的不多